How to override MUIv4 class globally in JSS for nested themes?-CodePudding

TL;DR: Scroll to EDIT2

MUIv4 created the following classes for me from my nested theming:

<label class="MuiFormLabel-root-121 
MuiInputLabel-root-113 
MuiInputLabel-formControl-115 
MuiInputLabel-animated-118 
MuiInputLabel-shrink-117 
MuiInputLabel-marginDense-116 
MuiInputLabel-outlined-120 
Mui-disabled 
Mui-disabled 
MuiFormLabel-filled-123" 

data-shrink="true">Email</label>

Now I'm interested into changing the following class:

.MuiInputLabel-outlined-120.MuiInputLabel-shrink-117 {
    transform: translate(14px, -6px) scale(0.75);
}

therefore I have a theming file [duplicates just have the purpose to show what I tried]:

createTheme({
    overrides: {
      MuiInputLabel: {
        outlined: {
          color: red[500],
          backgroundColor:purple[600],
          MuiInputLabel: {
            shrink: {
              transform: "translate(0px, -15px) scale(0.75) !important",
            }
          },
          "&.MuiInputLabel-shrink": {
            transform: "translate(0px, -15px) scale(0.75) !important",
          },
          "&[class*='MuiInputLabel-shrink']":{
            transform: "translate(0px, -15px) scale(0.75) !important",
          },
        }
      },
    },
  })

But none of the rules work? What am I doing wrong? How can I see the generated classNames from createTheme?

EDIT - I was able to achieve the wanted effect with a CSS Wrapper:

const MUIWrapper = styled.div`
[class*="MuiInputLabel-outlined"][class*="MuiInputLabel-shrink"] {
    transform: translate(0px, -15px) scale(0.75);
}
  }
`

But actually I didn't wanted to implemented it this way

EDIT 2: As pointed out by @hotcakedev it is possible with:

createTheme({
    overrides: {
      ...
      MuiFormLabel: {
        outlined: {
          '.MuiInputLabel-shrink*': { // or '&.MuiInputLabel-shrink*'
            transform: translate(14px, -6px) scale(0.75);
          }
        },
      }
    },
  })

but I still wonder why there is no possibility to write it like this:

createTheme({
    overrides: {
      ...
      MuiFormLabel: {
        outlined: {
          MuiInputLabel: { 
            shrink: {
              transform: translate(14px, -6px) scale(0.75);
            }
          }
        },
      }
    },
  })

This would be what I would wish to write, since it is clear and easy readable!

CodePudding user response：

Not sure why you built your theme like that (has duplicated MuiInputLabel).

Please make sure the theme structure has no duplicated overriding components.

  createTheme({
    overrides: {
      ...
      MuiFormLabel: {
        outlined: {
          ...
        },
        shrink: {
          ...
        }
      }
    },
  })

If you want to style the same component inside a specific component, you could use & and other css tricks in the nested theme structure.

  createTheme({
    overrides: {
      ...
      MuiFormLabel: {
        outlined: {
          '.MuiInputLabel-shrink*': { // or '&.MuiInputLabel-shrink*'
            transform: translate(14px, -6px) scale(0.75);
          }
        },
      }
    },
  })

Otherwise, you could build your own global styles.

// GlobalStyles.js
import { createStyles, makeStyles } from '@material-ui/core';

const useStyles = makeStyles(() => createStyles({
  '@global': {
    '*': {
      boxSizing: 'border-box',
      margin: 0,
      padding: 0,
    },
    body: {
      height: '100%',
      width: '100%'
    },
    '#root': {
      height: '100%',
      width: '100%'
    }
    ...
    '.some-class': {
      '.MuiInputLabel-shrink*': { // or '&.MuiInputLabel-shrink*'
        transform: translate(14px, -6px) scale(0.75);
      }
    }
  }
}));

const GlobalStyles = () => {
  useStyles();

  return null;
};

export default GlobalStyles;

// App.js

...
import GlobalStyles from './GlobalStyles.js';

const App = () => {
  return (
    ...
    <Router>
      <GlobalStyles />
      ...
    </Router>
    ...
  )
};