CODEWITHSUNDEEP
reactjsmaterial-uistyled-components
Harry270
Harry270

Reputation: 1

Question about mixing styled-components with material-ui

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:

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

Upvotes: 0

Views: 2095

Answers (1)

Joseph Pung
Joseph Pung

Reputation: 129

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;
  }

Upvotes: 2

Related Questions