mui has been a pleasure to work with. It seems "everyone has their way" of doing react styling and layout. As a library developer, the task of managing this flexibility must be immense.

"My way" of customizing mui was to work with the global theme. So I created class names to add to say the MuiContainer. I relied on the selectors in the overrides, now mui component-specific styleOverrides prop.

My selectors are not working because of the following:

// v4 class names
.MuiContainer-root

// v5 class names
.css-1oqqzyl-MuiContainer-root

Is there a way to get the theme engine to render the class names the same way? For instance, is this evidence of mui reliance on emotion?

As an aside, when rendered in v4 the class names includes my custom classes:

.MuiContainer-root.Luci-AppLayout.root

Per the addendum, in v5 there are 3 sets of class names for a given element:

• mui without prefix
• mui with prefix (not present in v4)
• my custom classes "as-is"

Only the mui with prefix show-up in the "inspection" window; i.e., revealing the classes actually rendered to style the element.

Addendum

Per a comment from