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

Question

I'm converting from MUI 4 to 5. Working on converting from makeStyles() to styled components. Is there an example somewhere using the styled() method with a component that has child component props? For example, <ListItemText /> has primaryTypographyProps and secondaryTypographyProps , both of which I'm setting the inner className property for custom styles.

How does something like this...

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

...convert to something like this?

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

[Edit] This is the closest I've been able to find, but it's not quite there. What I'm trying to do is pass it through a props object, rather than whole components.

Answer 1

I haven't had a chance to verify if this works, but I'm assuming this is the direction I need to go with this:

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