mui / mui/material-ui

[material-ui] i can not let button use the props of MuiIcon in component setting, but instead get hardcode font size declaration

Open
#45,159 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

breaking change component: ButtonBase scope: icon button type: enhancement
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.