Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can't override IconButton styles in theme without affecting Checkbox and Switch #21503

Closed
2 tasks done
depiction opened this issue Jun 18, 2020 · 3 comments · Fixed by #26460
Closed
2 tasks done

Can't override IconButton styles in theme without affecting Checkbox and Switch #21503

depiction opened this issue Jun 18, 2020 · 3 comments · Fixed by #26460
Labels
breaking change component: checkbox This is the name of the generic UI component, not the React module! component: switch This is the name of the generic UI component, not the React module!
Milestone

Comments

@depiction
Copy link

depiction commented Jun 18, 2020

  • The issue is present in the latest release.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Any changes to IconButton in the global Material UI theme also affect CheckBox, Switch, and the expansion panel's expand icon.

Expected Behavior 🤔

Styles applied to IconButton via the Material UI theme only apply to IconButton.

Steps to Reproduce 🕹

Go to https://material-ui.com/components/checkboxes/#basic-checkboxes. Inspect any of the checkboxes to see that checkboxes inherit IconButton styles.

image

Context 🔦

Instead of overriding every IconButton in my project or creating a global class that would have to be manually applied to every IconButton, I decided to modify the theme. However, because other components inherit IconButton's styles, it's not easy. Once I changed the IconButton theme style, I had to style other components, like Checkbox, to reset the style back to what it would've been had I not modified IconButton's style. I also had to use !important on every CSS property that I wanted to reset.

Your Environment 🌎

Material UI: 4.9.14
React: 16.13.1

@depiction depiction added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Jun 18, 2020
@mbrookes
Copy link
Member

@depiction What change are you making that should only affect IconButton? A wrapper component may be more appropriate.

@depiction
Copy link
Author

@mbrookes I changed the styles for all three variants to match my project's design (default, primary, secondary). The size, color, background color, border color, and border radius change based on the variant. A wrapper component is an option, but I try to avoid wrapper components that don't provide any functional difference.

I've used MUI for about two years. In that time, IconButton is the only component that I've found to affect other components when it's style is changed in the theme. I've never used ButtonBase, but I'd assume that changing its style in the theme would affect other components, but that makes sense since it has "Base" in the name.

@oliviertassinari oliviertassinari added component: checkbox This is the name of the generic UI component, not the React module! component: switch This is the name of the generic UI component, not the React module! and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Jun 18, 2020
@oliviertassinari
Copy link
Member

+1 for removing the IconButton from the SwitchBase component. I have been struggling with overrides for the same reason in the past (for designing the Switch and Checkbox components).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
breaking change component: checkbox This is the name of the generic UI component, not the React module! component: switch This is the name of the generic UI component, not the React module!
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants