Working with mui has truly been a delightful experience. Each developer seems to have their own unique approach when it comes to styling and layout in react. The flexibility provided by mui must present quite the challenge for library developers.
In customizing mui, I decided to focus on working with the global theme. This involved creating specific class names to apply to elements like MuiContainer. Initially, I relied on selectors within the overrides, but now mui offers component-specific styleOverrides prop.
Unfortunately, my selectors are not functioning properly due to the following change:
// Class names in v4
.MuiContainer-root
// Class names in v5
.css-1oqqzyl-MuiContainer-root
I'm left wondering if there is a way to ensure uniform rendering of class names by the theme engine. Could this shift be indicative of mui's reliance on emotion?
On a side note, when viewing the rendered output in v4, the class names included my custom classes as well:
.MuiContainer-root.Luci-AppLayout.root
An additional observation in v5 reveals that each element now possesses three sets of class names:
- mui without prefix
- mui with prefix (absent in v4)
- my custom classes remain untouched
Interestingly, only the mui class names with prefix show up in the inspection window, indicating which classes are actually being used to style the element.
Addendum
As per feedback from @Ryan Cogswell, both versions of class names are present in the html. However, during inspection using dev-tools, only the prefixed class names are utilized to style the elements.
To replicate the issue, please refer to the sandbox link below and inspect the code in the dev-tools:
https://codesandbox.io/embed/sad-varahamihira-pv73t5?fontsize=14&hidenavigation=1&theme=dark
Here's the code snippet from the sandbox example:
import Button from "@mui/material/Button";
import "./styles.css";
import { createTheme } from "@mui/material/styles";
import { ThemeProvider } from "@mui/styles";
const theme = createTheme({
components: {
// Component name
MuiButton: {
styleOverrides: {
// Slot name
root: {
// CSS styling
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>
);
}