将外部 styles 传递给 MUI 样式的组件

Question

Although I have seen similar questions, none seem to address my situation.

I am migrating MUI v4 to MUI v5, and I've had a love of cases in which a particular style comes externally. For example, this is what it would look like using makeStyles :

const useStyles = makeStyles((theme) => {
  typographyRoot: ({ color }) => ({
    padding: theme.spacing(1),
    color
  })
})

const Example = ({ color }) => {
  const classes = useStyles({ color })
  return (
    <Typography variant="body1" classes={{ root: classes.typographyRoot }}>
      Some example
    </Typography>
  )
}

Now I am attempting to do this using styled components, how would I pass in the color prop as I did in the useStyles?

Here is what I currently have:

const StyledTypography = styled(Typography)(({ theme }) => ({
  padding: theme.spacing(1),
  color // how to pass in color in this styled component
}))

const Example = ({ color }) => {
  return (
    <StyledTypography variant="body1">
      Some example
    </StyledTypography>
  )
}

Suppose I could wrap the StyledComponent in a function and pass it in there, but I feel like there must be a more appropriate way to do so. Specifically:

const getStyledTypography = (color) => styled(Typography)(({ theme }) => ({
  padding: theme.spacing(1),
  color
}))

const Example = ({ color }) => {
  const StyledTypography = getStyledTypography(color)
  return (
    <StyledTypography variant="body1">
      Some example
    </StyledTypography>
  )
}

Anyway, what is the proper way to pass in extra props into a styled component in this fashion?

Answer 1

It should be passed as prop.

<StyledTypography variant="body1" color={'red'}>
      Some example
    </StyledTypography>

const StyledTypography = styled(Typography, {
     shouldFrowardProp:(prop) => prop !== 'color'
})(({ theme, color }) => ({
  padding: theme.spacing(1),
  color: color
}))

Use shouldForwardProp to not pass the prop to the dom element.