How do I replace dollar sign nested class selectors in MUI 5 for selectors without a global class name?

Viewed 219

I've inherited a large MUI project and my first task with it is to migrate to MUI 5. The migration guide tells me to replace any state classes or nested classes that use the dollar sign ($) with the actual class name (https://mui.com/guides/migration-v4/#migrate-themes-styleoverrides-to-emotion)... I've done this with any global classes, but I can't find what to do with dollar sign selectors that are referencing another local class, rather than a global class name.

Here's an example: the $comment reference here, is referencing the comment class.. but how do I reference this without the dollar sign?

export const styles = (theme: Theme) =>
  createStyles({
    commentBlock: {
      '&:not(:last-child)': {
        marginBottom: 18,
      },
    },
    commentBlockDeleted: {
      [`& $comment`]: {
        opacity: 0.5,
      },
    },
    comment: {
      backgroundColor: inputBackground,
      padding: '8px 12px',

      [theme.breakpoints.up('sm')]: {
        padding: 16,
      },
    },

Thanks for any help.

0 Answers
Related