ReactJS Material UI：TextField悬浮边框主题变量添加!important方法求助

要给主题变量加上!important来覆盖TextField默认的hover边框样式，直接拼接字符串即可，sx属性支持字符串形式的CSS值。

方法1：字符串拼接主题变量与!important #

修改样式对象，将主题变量和!important拼接成一个字符串：

const style = {
  fieldset: {
    borderColor: theme.palette.primary.main
  },
  "&:hover fieldset": {
    // 通过模板字符串拼接主题变量和!important
    borderColor: `${theme.palette.primary.main}!important`
  }
};

return <TextField sx={style} />;

补充说明 #

直接写theme.palette.primary.main不生效，是因为Material-UI默认的TextField hover边框样式优先级高于自定义内联样式，!important会强制提升该样式优先级，从而覆盖默认样式。

替代方案（无需!important） #

如果不想使用!important，可以通过提高选择器特异性来实现，比如用styled组件自定义TextField：

import { styled } from '@mui/material/styles';
import TextField from '@mui/material/TextField';

const CustomTextField = styled(TextField)`
  &:hover fieldset {
    border-color: ${({ theme }) => theme.palette.primary.main};
  }
`;

// 使用自定义组件
return <CustomTextField />;

这种方式生成的类名样式优先级高于Material-UI默认样式，无需额外加!important。

内容的提问来源于stack exchange，提问作者SJ19