如何在 JSS 中为嵌套主题全局覆盖 MUIv4 类？

Question

TL;DR：滚动到 EDIT2

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>

现在我有兴趣更改以下课程：

.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);
}
  }
`

但其实我并不想这样实现

编辑 2： 正如@hotcakedev 所指出的，可以：

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

但我还是想知道为什么不可能这样写：

createTheme({
    overrides: {
      ...
      MuiFormLabel: {
        outlined: {
          MuiInputLabel: { 
            shrink: {
              transform: translate(14px, -6px) 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);
          }
        },
      }
    },
  })

否则，您可以构建自己的全局样式。

// 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>
    ...
  )
};