Open terraelise opened 2 years ago
Hi @terraelise, is it possible for you to add your own user defined styles to override the unwanted style using makeStyles
and mergeClasses
? This default styling is to help folks who are migrating from an older icon set switch easier
@tomi-msft That is what we are doing now, was just hoping there was a way to remove the injected styles. I have not yet been able to and generally I find it a mess to constantly override or !important
styles and to have these unwanted classes in our CSS deliverables. I haven't tried more with makeStyles and mergeClasses, though, I'll have a look at the source code - is there documentation about them? Thank you!
@terraelise Here is the fluentui docs page on styling: Style guide
@tomi-msft ah, well, we do not use fluentui, only the icons set via React Icons and are unable to stop that library from injecting the classes noted in my OP.
We have this package installed as a dependency in our ReactJS app: "@fluentui/react-icons": "^2.0.182"
We have a component that calls a predetermined list from the icon set based on our designers choices.
The SVG output includes classes we add for sizing and other styling needs, but also comes along with classes out of our control we often have to override and we'd like to have a way to tell the package we do not want those classes and have them not a part of our app.
I'm also running into this issue using "@fluentui/react-icons": "^2.0.223"
. The inability to exclude the bundled styles makes it very difficult to override the display: inline
rule. Relying on the generated class names feels unreliable.
Is there a way to not add the mergeClasses styles ("___1yjlmar f1w7gpdv fez10in f1kxrtqx")? I don't understand why these are added nor how to exclude them. Any help appreciated, it's causing styling issues and unwanted CSS generated.