如何在 MUI 5 中使用美元符号 ($) 覆盖样式？

Question

下面的代码来自 MUI 5，带有 MUI 4 解决方案，用于在悬停时更改输入字段。但这显然不起作用，想知道如何在MUI 5中实现这一点，不能 似乎在悬停时从TextField 改变颜色。这是在 MUI 5 中使用 createTheme 完成的

components: {
  MuiInputLabel: {
    styleOverrides: {
      root: {
        color: arcBlue,
        fontSize: '1rem',
      },
    },
  },
  MuiInput: {
    styleOverrides: {
      underline: {
        '&:before': {
          borderBottom: `2px solid ${arcBlue}`,
        },
        // Code from material ui 4
        '&:hover:not($disabled):not($focused):not($error):before': {
          borderBottom: `2px solid ${arcGrey}`,
        },
      },
    },
  },
},

Answer 1

$ 语法是 JSS 的一项功能，在 MUI v5 中，它们切换到情感，因此不再起作用，您现在有 2 个选项：

使用纯字符串

从this 部分，您可以看到描述不同 MUI 组件状态的类名列表：

State	Global class name
active	.Mui-active
checked	.Mui-checked
completed	.Mui-completed
disabled	.Mui-disabled
error	.Mui-error
expanded	.Mui-expanded
focus visible	.Mui-focusVisible
focused	.Mui-focused
required	.Mui-required
selected	.Mui-selected

'&&:hover:not(.Mui-disabled):not(.Mui-error):before': {
  borderBottom: `5px solid purple`
}

使用常量

如果您不想硬编码类名，大多数 MUI 组件都有自己的类常量：

import { [component]Classes } from "@mui/material/[Component]";
import { inputClasses } from "@mui/material/Input";

[`&&:hover:not(${inputClasses.disabled}):not(${inputClasses.focused}):before`]: {
  borderBottom: `5px solid purple`
}

参考

• https://mui.com/guides/migration-v4/#migrate-themes-styleoverrides-to-emotion