'Scoping v5 MUI Styles

We have a legacy application that we're slowly migrating to React and MUI. In order to prevent overlap in styling between the different parts of our application that haven't been converted and vice versa, we've scoped styles by using an id selector in combination with a descendant selector. For example, our styles look like this:

Example output for our styles:

enter image description here

This allows us to prevent our legacy styles from affecting our newer styles and our newer styles from affecting our older styles. Before MUI v5 was released we were able to do this using a custom JSS plugin and prepend the id selector. However, we're trying to upgrade MUI and phase out JSS completely. Is there a way to do this with v5 using the supported styling engines?

Thanks for any help in advance.

cssreactjssassmaterial-ui


Solution 1:[1]

A custom Stylis plugin? It can be added in https://emotion.sh/docs/@emotion/cache#createcache and https://github.com/Andarist/stylis-plugin-extra-scope could give an idea on how to use it.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Olivier Tassinari

Related Questions