通过主题“覆盖”配置覆盖 Material-UI 样式，设置 NotchedOutline 样式答案

【问题标题】：Overriding Material-UI styles via theme 'overrides' configuration, styling a NotchedOutline通过主题“覆盖”配置覆盖 Material-UI 样式，设置 NotchedOutline 样式
【发布时间】：2020-02-21 11:48:17
【问题描述】：

我有一个Code Sandbox repro here。

通常，TextField 是几个其他组件的便捷包装器，其边框颜色为纯灰色，悬停颜色为theme.palette.primary.main。

我想更改它，使悬停颜色和非悬停颜色相同。

我一直在尝试使用覆盖配置：

const themeOptions = {
  palette: {
    primary: {
      main: "#FF5555"
    },
    text: {
      primary: "#5555FF"
    }
  },
  overrides: {
    MuiOutlinedInput: {
      root: {
        borderColor: "#55FF55",
        "&:hover": {
          borderColor: "#55FF55"
        }
      },
      notchedOutline: {
        borderColor: "#55FF55",
        "&:hover": {
          borderColor: "#55FF55"
        }
      }
    }
  }
};

我遇到的问题是，应用于最终样式化的fieldset 的类是：

.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline

如何使用覆盖配置更改此规则？

也就是说，我可以覆盖MuiOutlinedInput-root:hover 或.MuiOutlinedInput-notchedOutline 好的，但是我如何为组合覆盖它？

【问题讨论】：

标签： material-ui jss

【解决方案1】：

在overrides 部分的notchedOutline 属性上，您可以删除“&:hover”属性并在根悬停部分添加notchedOutline，如下所示：

overrides: {
  MuiOutlinedInput: {
    root: {
      borderColor: "#55FF55",
      "&:hover $notchedOutline": {
        borderColor: "#55FF55"
      }
    },
    notchedOutline: {
      borderColor: "#55FF55"
    }
  }
}

这样，悬停和默认根颜色将相同。

【讨论】：