Question

我正在使用makeStyles向按钮添加样式，但是在应用程序中包含了一些其他第三方css文件，这些文件会覆盖我的样式而没有'！important'。我尝试了这种方法，但是它不起作用，浏览器中没有生成属性：

const useStyles = makeStyles({
  button: {
    backgroundColor: props => props.actionBackgroundColor,
    borderColor: props => props.actionBackgroundColor,
    color: props => {
      if (props.actionTextColor) {
        return `${props.actionTextColor} !important`;
      }
      return null;
    },
    '&:hover': {
      backgroundColor: props => props.actionHoverColor,
      borderColor: props => props.actionHoverColor,
      color: props => {
        if (props.actionHoverTextColor) {
          return `${props.actionHoverTextColor ? props.actionHoverTextColor : props.actionTextColor ? props.actionTextColor : null} !important`;
        }
        return null;
      }
    }
  }
});

有什么解决方法吗？

Answer 1

可以请您检查此沙箱吗？我在其中实现了您的解决方案的CustomButton组件，并且运行良好。

Code Sandbox

Answer 2

似乎我正在使用旧版的ui；

“ @ material-ui / core”：“ ^ 3.9.2”，“ @ material-ui / styles”：“ ^ 4.4.1”，

这是一个问题，似乎“！important”不适用于该版本。所以我需要升级它。

react + Material ui makeStyles与'！important'

2 个答案: