This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2020-03-09
Channels
- # aws (51)
- # beginners (57)
- # calva (10)
- # chlorine-clover (7)
- # cider (20)
- # clj-kondo (55)
- # clojure (43)
- # clojure-europe (9)
- # clojure-italy (1)
- # clojure-nl (5)
- # clojure-spec (8)
- # clojure-uk (71)
- # clojurescript (33)
- # core-async (22)
- # cursive (20)
- # datomic (3)
- # emacs (8)
- # figwheel-main (8)
- # fulcro (13)
- # garden (2)
- # graalvm (60)
- # graphql (26)
- # jobs (6)
- # joker (6)
- # kaocha (2)
- # lambdaisland (5)
- # malli (36)
- # off-topic (9)
- # portkey (15)
- # re-frame (3)
- # reagent (25)
- # remote-jobs (4)
- # spacemacs (3)
- # sql (111)
- # tree-sitter (29)
- # uncomplicate (3)
- # xtdb (2)
Does anyone know how I can remove a class name from and adapted react class?
(ns test.core
(:require
["@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?@madhat2r Can't be done. The class is part of Material-UI component implementation: https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/SvgIcon/SvgIcon.js#L72
I think it may be done with https://material-ui.com/styles/api/#creategenerateclassname-options-class-name-generator
But it would disable such built-in classes globally. Another possible alternative - just pass your own root
class.
Okay, yeah, The component will have some "root" class, but you can probably replace the built-in with your own class.
Maybe [add-icon {:classes {:root "your-own-root-class"}}
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.
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.
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.
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.
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.
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.
To make sure that that's indeed the case, run https://shadow-cljs.github.io/docs/UsersGuide.html#_build_report on your release build.
That is good to know. I am still trying to get my head around this stuff. There sure are whole lot of moving pieces :)
Yep. Fortunately, in the CLJS world they don't move too far away or as quickly as in the raw and barbarian JS world. :)
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.
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.