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': { ... },
}));