default "css-" class names using MUI styled-components

Question

I'm using Mui's styled components, and i've noticed it injects a class that starts with "css-" and replaces the class name i've given to it in the code

I've tried to follow everything that was suggested here and here but without success (including StyledEngineProvider and CacheProvider with preprend true.

Here is the code and the result i'm getting:

Page.tsx:

import * as S from "./Page.style";
export default function Page(): ReactElement {
  return (
      <S.Container>
      </S.Container>
  );
}

Page.style:

import { styled } from "@mui/material/styles";
export const Container = styled("div")({
  paddingTop: "10%",
  paddingRight: "11%"
}); 

Result

Expected result is the name is something like that includes the word "Container"

Answer 1

There are two steps of this, what you want to achieve.

1. provide the styled options

export const Container = styled("div", {
  name: 'Container',
  slot: 'Root'
})({
  paddingTop: "10%",
  paddingRight: "11%"
});

This will add css-[id]-Container-root class to your component, but the problem is that you would likely also like to have just a clean Component-root class name on it, right? FFWD to second step.

2. generate class names and use them

MUI has two utility functions that they use with all of their components: generateUtilityClass and generateUtilityClasses. Both take the name of your component and an array of slots that you may use in your component. Root is usually the top of your component, but within you may have whatever components/containers or in other words slots, where you can apply these classes. These slots are of course a more complex thing not just CSS classes, but for this purpose, let's do that to your component:

const name = 'Container';
export const containerClasses = generateUtilityClasses(name, ['root', 'actions',...]);
export const Container = styled("div", {
  name,
  slot: 'Root'
})({
  paddingTop: "10%",
  paddingRight: "11%"
});

// ....

// and then within your component
return (
    <Component className={componentClasses.root}>
        ...
        <Stack className={componentClasses.actions}>
            <Button.../>
            <Button.../>
            <Button.../>
        </Stack>
    </Component>
);

generateUtilityClasses internally uses generateUtilityClass which interpolates CSS class names by doing the `${componentName}-${slot}` mainly. Except for the globally recognised states, it returns names Mui-active, Mui-selected and similar. To know which CSS class names will not be bound to your component, this is the list of global state names

export declare type GlobalStateSlot = 'active' | 'checked' | 'completed' | 'disabled' | 'error' | 'expanded' | 'focused' | 'focusVisible' | 'required' | 'selected';