search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.87k stars 32.26k forks source link

IconButton #10726

Closed rwollgar closed 6 years ago

rwollgar commented 6 years ago

Expected Behavior

Current Behavior

Steps to Reproduce (for bugs)

1. 2. 3. 4.

Context

Your Environment

Tech Version
Material-UI
React
browser
etc
rwollgar commented 6 years ago

Material-UI: 1.0.0-beta.36 react: 16.2

Up until beta.35 setting the IconButton fontsize llike this:

iconbutton_root: {
    width: '20',  
    // height: '50',   
    **fontSize: '1.7rem',**   
    marginRight: '15',
    color: "black",
    "&:hover": { color: env.COLORS.blue, fontSize: '2.2rem', fontWeight: '900' }
},

iconbutton_root_selected: {
    width: '20',  
    // height: '50',   
    **fontSize: '2.2rem',**   
    marginRight: '15',
    color: "#0089ff"
},

worked. Since beta.36 this doesn't work anymore. It is mentioned on the release notes for beta.36 it is mentioned that there is a breaking change, but I don't know how to set the fontsize if the Icon from beta.36 onwards.

oliviertassinari commented 6 years ago

@rwollgar You need to apply the font size on the Icon, not the IconButton.

rwollgar commented 6 years ago

Hi Oliver,

Given an IconButton how can I apply the fontsize to the Icon using the css api and classes mechanism. Thanks for your help.

oliviertassinari commented 6 years ago

@rwollgar With the className.

rwollgar commented 6 years ago

Hi Oliver,

Your answer is not helping and I know that it is very likely because I don't quite understand the CSS API and classname/classes mechanism which is also a problem with the documentation. My understanding was sufficient up to beta 35 but since beta 36 I have no idea how to apply the fontsize.

An example and more realistic examples in the documentation would go a long way in understanding styling compnents.

oliviertassinari commented 6 years ago 
<IconButton>
  <DeleteIcon className="my-class-name" />
</IconButton>