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

Question

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

这样的事情怎么...

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

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

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

[编辑] This is 是我能找到的最接近的，但它并不完全在那里。我想要做的是通过 props 对象而不是整个组件传递它。

Answer 1

我还没有机会验证这是否可行，但我假设这是我需要采取的方向：

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