MUI 5 using styled components with child component props

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.

score 1 · Answer 1 · answered Jan 04 '22 at 15:48

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

answered Jan 04 '22 at 15:48

Kizmar

2,465
3
20
27

score 0 · Answer 2 · answered Nov 06 '22 at 16:59

You are very close!

import listItemTextClasses from '@mui/material';

...

const StyledListItemText = styled(ListItemText)(() => ({
  [`& .${listItemTextClasses.primary}`]: {...}
  [`& .${listItemTextClasses.secondary}`]: {...}
}));

https://mui.com/base/getting-started/customization/#applying-custom-css-rules

MUI 5 using styled components with child component props

2 Answers2