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

德约翰斯顿

通常，aTextField是其他几个组件的便捷包装，其边框颜色为纯灰色，悬停颜色为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确定，但是如何为组合覆盖它呢？

负273

notchedOutline在该overrides部分的属性上，可以删除“＆：hover”属性，然后notchedOutline在根悬停部分中添加，如下所示：

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。