Question about mixing styled-components with material-ui

Question

Hello I am a react newbie and new to styling as well :) I am trying to style the material-ui Button component with styled components

I am doing this by overriding global class names, I know material-ui introduced global class names like MuiButton-root etc

I am not clear on the use of "&" in parent selector, for example:

const StyledButton = styled(Button)`
  &.MuiButton-root {
    width: 500px;
  }

  .MuiButton-label {
    color: ${props => props.labelColor};
    justify-content: center;
  }
`;

The above code works and can achieve the following:

The Button has a width of 500px
The label has a color of red (labelColor is passed in as a prop)
Please see sandbox below for full code

Question: Why do I need "&" selector for the MuiButton-root, whereas for the MuiButton-label I don't?

Also is this the best way to style material-ui with styled components?

Please see the following sandbox: https://codesandbox.io/embed/practical-field-sfxcu

Joseph Pung Joseph Pung · Accepted Answer · 2019-11-05T07:08:11

The '&' selector is used to target the classes and neighbouring elements/classes. Take a look at cssinjs. Its the underlying system behind MUI's styling.

But in short to answer your question;

  const StyledButton = styled(Button)` 
  &.MuiButton-root { //this targets any class that is added to the main component [1]
    width: 500px;
  }

  .MuiButton-label { //in css-in-js this is effectively '& .MuiButton-label [2]
    color: ${props => props.labelColor};
    justify-content: center;
  }

[1] Targets main classes on component

<StyledButton className='test bob'>  << this element is targeted
</StyledButton>

[2] Targets child elements either through class or element type. Note the space between & and the actual class.

<StyledButton className='test bob'> 
  <span className='MuiButton-label'>test</span> << this element is targeted instead
</StyledButton>

You can also use the element tag directly

  span { 
    color: ${props => props.labelColor};
    justify-content: center;
  }

Question about mixing styled-components with material-ui

1 Answers