This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
- # aws (51)
- # beginners (57)
- # calva (10)
- # chlorine-clover (7)
- # cider (24)
- # 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?
This will return an
(ns test.core (:require ["@material-ui/icons/Add" :default AddIcon] [reagent.core :as r])) (def add-icon (r/adapt-react-class AddIcon))
svgwith a class of
MuiSvgIcon-rootas well as whatever other classes I have passed in. I would like to strip the
MuiSvgIcon-rootone 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
Okay, yeah, The component will have some "root" class, but you can probably replace the built-in with your own 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.
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.
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.