Incorrect classnames in Material UI with styled components inside react frame

Question

I am using react-frame-component to load a custom component I created which is using material ui and styled-components.

The custom component I created is irrelevant but contains the following relevant code:

const StyledCardHeader = styled(({ isRTL, ...rest }) => (
  <CardHeader {...rest} />
))`
  ${({ theme, isRTL }) => `
    & .MuiCardHeader-title {
      margin-right:${isRTL ? 0 : theme.spacing(2)}px;
      margin-left:  ${isRTL ? theme.spacing(2) : 0}px;
    }
`};
`;

When it renders, the actual classname becomes something else than I expect: MuiCardHeader-title-34 (it adds the 34 as suffix - random number).
Therefore, my custom styled is not being applied.

Here's a sandbox of the above: https://codesandbox.io/s/sparkling-field-ui82v

95faf8e76605e973 95faf8e76605e973 · Accepted Answer · 2020-08-16T02:55:12

You can look into overriding the MUI CardHeader CSS based off of the docs.

<CardHeader
  {...rest}
  classes={{
    title: makeStyles({
      customTitleMargin: {
        marginRight: `${isRTL ? 0 : theme.spacing(2)}px`,
        marginLeft: `${isRTL ? theme.spacing(2) : 0}px`,
      }
    })().customTitleMargin
  }}
/>

I did not want to mess with your code too much so in my example, I just plugged in the makeStyles export from @material-ui/styles, but the logic of future implementations is similar in that you should just override the MUI component itself.

CodeSandBox: https://codesandbox.io/s/lucid-joliot-5mf8n?file=/src/Card.js

Incorrect classnames in Material UI with styled components inside react frame

1 Answers