MUI styled components cheat sheet

MUI Styled Components

In the last 2 years that I've had to deal with MUI, one thing that I keep forgetting is how to use @emotion/styled in different ways to either directly style, add props, and use MUI's theme in various ways.

If I'm writing this it means either I haven't found the proper documentation page that describes those correctly, or it was a bit too technical for me and not hands-on in a way that clarifies things.

I specifically do not use typescript in these examples to keep things simple at the moment.

Basic example: Just styles of a component.

const  BoldChip  =  styled(Chip)({
  fontSize:  '0.625rem',
  fontWeight:  600,
  lineHeight:  '0.875rem',
});

Using Theme values. Note that in a styled component such as this you cannot use shorhands: p must be padding, etc. Also, you can't just use theme numerical values, so as seen below, you can't do p: 2 it has to be padding: theme.spacing(2)

const  Wrapper  =  styled(Box)(({ theme }) => ({
  display:  'flex',
  gap:  theme.spacing(2),
}));

Using ShouldForwardProps, to prevent these props from being tagged as invalid.

const  InfoCellLeft  =  styled(InfoCellBase, {
  shouldForwardProp: (props) =>  props  !==  'italic',
})(({ theme, italic }) => ({
  padding:  theme.spacing(2, 0, 2, 2),
  fontStyle:  italic  ?  'italic'  :  'normal',
}));

Using typed props + custom component definition. The complicated one :P

const StyledCountryMenu = styled((props) => (
  <Menu
    anchorOrigin={{
      vertical: 'top',
      horizontal: 'left',
    }}
    transformOrigin={{
      vertical: 'bottom',
      horizontal: 'left',
    }}
    {...props}
  />
))(({ theme }) => ({
  '& .MuiPaper-root': {
    border: '2px solid white',
    borderRadius: theme.spacing(2),
    padding: theme.spacing(1),
    display: 'flex',
    flexDirection: 'column',
    gap: theme.spacing(1),
  },
}));

eslachance/index.md

MUI Styled Components