Is there a way to have mui v5 render the classnames without the css-xxx prefix?

Question

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 @Ryan Cogswell, the two versions of the class names are rendered in the html. However, in the inspection window of the dev-tools, the only version of the class used to style the element, is the class with the prefix.

Here is my first go at replicating the problem in the sandbox. Look in the dev-tools inspector.

https://codesandbox.io/embed/sad-varahamihira-pv73t5?fontsize=14&hidenavigation=1&theme=dark

Here's the code from the sandbox:

import Button from "@mui/material/Button";
import "./styles.css";
import { createTheme } from "@mui/material/styles";
import { ThemeProvider } from "@mui/styles";

const theme = createTheme({
  ccomponents: {
    // Name of the component
    MuiButton: {
      styleOverrides: {
        // Name of the slot
        root: {
          // Some CSS
          color: "red",
          "&.Custom": {
            color: "green"
          }
        }
      }
    }
  }
});

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <div>
        <h1>Hello CodeSandbox</h1>
        <Button className="Custom">Testing</Button>
      </div>
    </ThemeProvider>
  );
}

Answer 1

There were two issues with the code in your sandbox.

1. You had ccomponents in your theme instead of components. I suspect this double c was just a typo specific to your sandbox and probably isn't in your real code.
2. You were importing the ThemeProvider from "@mui/styles". You should be importing it from "@mui/material/styles" instead. "@mui/styles" is for the legacy JSS styling approach and using that ThemeProvider does not make the theme visible to the "@mui/material" styling engine. The ThemeProvider in "@mui/material/styles" places the theme into two different contexts -- one is the same as what @mui/styles uses, the other provides the theme to the styling engine.

Here's a working version of your sandbox:

import Button from "@mui/material/Button";
import { createTheme } from "@mui/material/styles";
import { ThemeProvider } from "@mui/material/styles";

const theme = createTheme({
  components: {
    // Name of the component
    MuiButton: {
      styleOverrides: {
        // Name of the slot
        root: {
          // Some CSS
          color: "red",
          "&.Custom": {
            color: "green"
          }
        }
      }
    }
  }
});

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <div>
        <h1>Hello CodeSandbox</h1>
        <Button className="Custom">Testing</Button>
      </div>
    </ThemeProvider>
  );
}