通过主题 'overrides' 配置覆盖 Material-UI 样式，为 NotchedOutline 设置样式

Question

通常，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 的 class 最终得到样式化的是：

.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline

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

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

Answer 1

在 notchedOutline 属性的 overrides 部分，您可以删除“&:hover” 属性并在 notchedOutline像这样的根悬停部分：

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

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

通过主题 'overrides' 配置覆盖 Material-UI 样式，为 NotchedOutline 设置样式

Overriding Material-UI styles via theme 'overrides' configuration, styling a NotchedOutline

material-ui

jss