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

Question

虽然我见过类似的问题，但似乎没有一个能解决我的情况。

我正在将 MUI v4 迁移到 MUI v5，并且我很喜欢外部出现特定样式的情况。 例如，这是使用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>
  )
}

现在我正在尝试使用styled化组件来执行此操作，我将如何像在 useStyles 中那样传递颜色道具？

这是我目前拥有的：

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

假设我可以将 StyledComponent 包装在 function 中并将其传递到那里，但我觉得必须有更合适的方法来做到这一点。 具体来说：

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

无论如何，以这种方式将额外的道具传递到样式组件中的正确方法是什么？

Answer 1

它应该作为道具通过。

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

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

使用 shouldForwardProp 不将 prop 传递给 dom 元素。