react + Material ui makeStyles with '!important'答案

【问题标题】：react + Material ui makeStyles with '!important'react + Material ui makeStyles with '!important'
【发布时间】：2019-12-24 17:51:09
【问题描述】：

我正在使用 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;
      }
    }
  }
});

有什么解决办法吗？

【问题讨论】：

您要覆盖的这些样式是否来自您尝试使用的 material-ui 组件？
不，正如我所说，它是一些自定义的第三方库，只是 css 文件。

标签： javascript reactjs material-ui

【解决方案1】：

你能检查一下这个沙箱吗？有一个 CustomButton 组件，我在其中实现了您的解决方案，它工作正常。

Code Sandbox

【讨论】：

是的，似乎我使用的是旧的材料 ui 版本，这就是为什么它对我不起作用：“@material-ui/core”：“^3.9.2”，“@material-ui /styles": "^4.4.1",

【解决方案2】：

好像我用的是旧版本的材质ui；

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

这是问题，似乎 '!important' 不适用于该版本。所以我需要升级它。

【讨论】：