[material-ui] i can not let button use the props of MuiIcon in component setting, but instead get hardcode font size declaration
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Steps to reproduce
I have a MuiButton which has a startIcon. The generated code is
Button.MuiButtonBase-root
span.MuiButton-icon
svg.MuiSvgIcon-root
Now in the createTheme component options i set MuiButton font-size to 1rem and all sizes of MuiSvgIcon to their specific rem
But the button (actually the span.MuiButton-icon) adds this class:
.css-UNIQUE > :nth-of-type(1) {
font-size: 18px;
}
While i defined the font-size on Button level and Icon on Icon level. Which is perfect and when i remove the injected extra class it all looks correct. Now i have to overrule this :nth-of-type(1) for each button size and then it wins from the still added font size.
I think this is a bug in the deepmerge functionality. Because how do you want me to just remove the cullprit from the component declaration instead of adding lots of selectors to win. It would be great if i can unset things, certainly when moving to a rem based setup.
Current behavior
Button component adds specific css for the font for the icon by default.
No way to get rid of this during construction of the component with createTheme
I like MUI is having defaults, but it should be nicer to get rid of these when you implicitly want to do so (i see some implementations using unset for example).
Expected behavior
I hoped just like other systems like Chakra that i can remove particular default settings.
so when i set this '> :nth-of-type(1)': undefined|null on theme creation it would remove it :)
Context
We are moving to rems. Now lots of MUI is in pixels, and lots of these are not as we design them. So i endup with lots of extra classes (have to import this from every component being used in a mui component which highly couples the structure mui is using with zero guarentees for the future) to just win while the wrapper in most cases was already fine to begin with. So lots of extra code to maintain.
It would be great if i can remove defaults. So its not a variant or override.
Your environment
its with every mui version, not particular to a single version, lets say im using latest (which i do) :)
Search keywords: merge, style override
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the createTheme component options for MuiButton and the generated MuiButton-icon styles, especially the :nth-of-type(1) font-size rule. Compare the button and MuiSvgIcon size settings and determine how a theme override could remove that default rule. Done means the icon inherits the intended rem-based sizing without adding per-button selectors.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- design, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100