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:
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.