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

Question

虽然我也看到过类似的问题，但none似乎解决了我的情况。

我正在将 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 包装在一个函数中并将其传递到那里，但我觉得必须有更合适的方法来做到这一点。具体来说：

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 元素。

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

pass in external styles to a MUI styled component

javascript

reactjs

material-ui