javascript – Syntax for child selector in CSS / JSS using MUIv4 overrides

In my code (response) I have the principle of this automatically generated nested (!) Theme by JSS MUI:

.MuiGrid-spacing-xs-4-348 > .MuiGrid-item-324 {
    padding: 16px;
}

I want to solve using this principle:

createTheme(theme, {
    overrides: {
      MuiGrid: {
        'spacing-xs-4': {
          width: "100%",
          margin: 0,

          // what to write here? This doesn't work:
          // '& .MuiGrid-item' : {
          //   border: 20px solid pink,
          // },
          },
        },
      },
    },
    
  });

Whenever some JSS / MuiDev is reading this:

I find it kind of nonsense to convert key syntax to strings like CSS for this purpose. To assign rules to classes developed by MUI.

I have to write:

MuiGrid: {
        'spacing-xs-4': {

(Or is there another way?) Instead of the example:

MuiGrid: {
        spacing: {
            xs: {
                4: {

Doesn’t that make much sense?

Thank you for the helpful comments!

Add a Comment

Your email address will not be published. Required fields are marked *