MUI 5 使用带有子组件道具的样式化组件

Question

我正在从 MUI 4 转换到 5。正在从makeStyles()转换为样式化组件。 是否有使用styled()方法和具有子组件道具的组件的示例？ 例如， <ListItemText />有primaryTypographyProps和secondaryTypographyProps ，我正在为自定义 styles 设置内部className属性。

这种东西怎么...

<ListItemText
  {...props}
  primaryTypographyProps={{
    variant: 'body2',
    className: classes.primary,
  }}
  secondaryTypographyProps={{
    variant: 'body1',
    className: classes.secondary,
  }}
/>

...转换成这样的东西？

const StyledListItemText = styled(ListItemText)(({ theme }) => ({
  ...???...
}));

[编辑] 这是我能找到的最接近的，但它并不完全在那里。 我想要做的是通过一个道具 object 传递它，而不是整个组件。

Answer 1

我没有机会验证这是否有效，但我假设这是我需要 go 的方向：

const StyledListItemText = styled(ListItemText)(() => ({
  'MuiListItemText-primary': { ... },
  'MuiListItemText-secondary': { ... },
}));