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

Question

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

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}`,
        },
      },
    },
  },
},

标签： reactjsmaterial-uijss

Answer 1

$语法是 JSS 的一个特性，在MUI v5中，它们切换到情感，所以它不再起作用了，你现在有 2 个选项：

使用纯字符串

在本节中，您可以看到描述不同 MUI 组件状态的类名列表：

状态	全局类名
积极的	.Mui-active
检查	.Mui-checked
完全的	.Mui-completed
禁用	.Mui-disabled
错误	.Mui-error
展开	.Mui-expanded
焦点可见	.Mui-focusVisible
专注	.Mui-focused
必需的	.Mui-required
选择	.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