MUI v5: How to generate style classes for interop with other libraries?

Question

I am using MUI v5 together with Quill in React.

I can pass a className prop to the ReactQuill component and change it's styling:

const useStyles = makeStyles((theme) => ({
  editor: {
    '& .ql-editor': {
      border: 'none',
      // and so on...
    }
  }
}))

<ReactQuill className={classes.editor} ... />

Now with MUIv5 and its migration to emotion, this is not possible anymore. My workaround currently is to wrap the ReactQuill element inside a div like so:

const ReactQuillContainer = styled('div')(({theme}) => ({
  '& .ql-editor': {
    border: 'none',
    // and so on...
  }
}))

<ReactQuillContainer>
  <ReactQuill ... />
</ReactQuillContainer>

But this changes the underlying DOM structure.

Is there a way to achieve the old result in the new way? I know about the css function, however I need the theme for styling and I don't think that is possible.

I also don't want to inline all those styles.

Answer 1

Have you solved this yet? I'm facing a similar issue, where I'd like to programmatically set MUI TextField styling on a Quill editor.

If not, have you tried passing Quill itself to styled? This works for me, though it doesn't solve my core problem. I'm also not sure it will allow you to set styles on child classes, but that may not be an issue.

const StyledQuill = styled(ReactQuill)(({ theme }) => ({
  color: theme.palette.warning.main,
    // and so on...
}));