CODEWITHSUNDEEP
reactjsmaterial-uistyled-components
Kizmar
Kizmar

Reputation: 2573

MUI 5 using styled components with child component props

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.

Upvotes: 1

Views: 1425

Answers (2)

beepboopiamabot
beepboopiamabot

Reputation: 70

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

Upvotes: 0

Kizmar
Kizmar

Reputation: 2573

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

Upvotes: 1

Related Questions