A minimalistic ClojureScript interface to React.js
Micah 2020-03-09T17:48:12.127Z

Does anyone know how I can remove a class name from and adapted react class?

(ns test.core
   ["@material-ui/icons/Add" :default AddIcon]
   [reagent.core :as r]))

(def add-icon (r/adapt-react-class  AddIcon))
This will return an svg with a class of MuiSvgIcon-root as well as whatever other classes I have passed in. I would like to strip the MuiSvgIcon-root one out. Is there a way this can be achieved?

juhoteperi 2020-03-09T17:54:41.127700Z

@madhat2r Can't be done. The class is part of Material-UI component implementation:

p-himik 2020-03-09T17:55:48.128Z

I think it may be done with

p-himik 2020-03-09T17:56:10.128800Z

But it would disable such built-in classes globally. Another possible alternative - just pass your own root class.

juhoteperi 2020-03-09T17:56:59.129600Z

Okay, yeah, The component will have some "root" class, but you can probably replace the built-in with your own class.

juhoteperi 2020-03-09T17:58:08.130200Z

Maybe [add-icon {:classes {:root "your-own-root-class"}}

juhoteperi 2020-03-09T18:00:49.130900Z

Point is, you can't modify the elements a component rendered, from the outside, but the component might provide API to control what it renders.

Micah 2020-03-09T18:08:05.132600Z

Thank you @p-himik and @juhoteperi. I can use [add-icon {:classes {:root "your-own-root-class"}} but it still includes the original one as well. Too bad.

p-himik 2020-03-09T18:08:40.132700Z

And you don't want to disable such classes globally?

Micah 2020-03-09T18:09:19.132900Z

That would be okay. Just haven't seen how to do that yet.

p-himik 2020-03-09T18:09:41.133100Z

I posted the link above.

Micah 2020-03-09T18:12:34.133300Z

Oh I see, thank you. I am not actually using the Material UI. I was just trying to get the Icons easily packaged. And unless I am mistaken, that is using the MUI library.

p-himik 2020-03-09T18:13:22.133500Z

You have it right there in your code example: "@material-ui/icons/Add".

p-himik 2020-03-09T18:15:21.133700Z

To my best knowledge, using it will still require @material-ui/core/styles, which is exactly where createGenerateClassName is located. So you are using Material UI, at least the parts of it that matter to you.

Micah 2020-03-09T18:17:15.133900Z

You are absolutely correct. I feel like an idiot. I was intending to use just the npm icons package. I tried out the full MUI early, but decided to dump it, but still wanted the icons. I appreciate your help.

p-himik 2020-03-09T18:19:56.134100Z

No problem. :) Just in case - IIRC requiring everything from the icons package will add that code in the resulting JS bundle. No matter whether an icon is used or not. So if you're trying to create some namespace like mui-icons-cljs that has all the icons (even if each icon in its own namespace) - your users end up embedding the whole MUI Icons package into their app, even if they use just one icon.

p-himik 2020-03-09T18:20:31.134300Z

To make sure that that's indeed the case, run on your release build.

Micah 2020-03-09T18:23:50.134600Z

That is good to know. I am still trying to get my head around this stuff. There sure are whole lot of moving pieces :)

p-himik 2020-03-09T18:25:27.134800Z

Yep. Fortunately, in the CLJS world they don't move too far away or as quickly as in the raw and barbarian JS world. :)

Micah 2020-03-09T18:28:06.135Z

That is something to be thankful for indeed!

juhoteperi 2020-03-09T18:30:42.135200Z

I think having every icon in their own namespace should only include those icons whose namespace is required by the application. But I'm not super familiar on how Shadow-Cljs works with JS modules. This could also depend on built settings, dev build might include JS files for all icons, but optimization would remove unused ones.

Micah 2020-03-09T18:36:56.135400Z

That would make sense. i will have to do more testing on this for sure.

p-himik 2020-03-09T18:45:38.135600Z

Oh yeah, @juhoteperi you're right! I just did a build report and it doesn't contain every icon if I separate them by their own CLJS namespaces.

p-himik 2020-03-09T18:55:52.135800Z

Ah, right, I remember now - you can do that but you cannot create one "master" namespace that combines every CLJS icon namespace under one roof. Even if those def's end up being unused, the :require's are still there, so the icons will end up in the JS bundle.

juhoteperi 2020-03-09T18:59:20.136200Z