如何在 JSS 中為嵌套主題全局覆蓋 MUIv4 class？

Question

MUIv4 從我的嵌套主題中為我創建了以下類：

<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>

現在我有興趣更改以下 class：

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

因此我有一個主題文件[重復只是為了展示我嘗試過的內容]：

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",
          },
        }
      },
    },
  })

但沒有任何規則有效？ 我究竟做錯了什么？ 如何從 createTheme 查看生成的類名？

編輯 - 我能夠使用 CSS Wrapper 實現想要的效果：

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

但實際上我不想以這種方式實現它

Answer 1

不知道你為什么要這樣構建你的主題（重復MuiInputLabel ）。

請確保主題結構沒有重復的覆蓋組件。

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

如果您想在特定組件中設置相同組件的樣式，您可以在嵌套主題結構中使用&和其他 css 技巧。

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

否則，您可以構建自己的全局 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>
    ...
  )
};