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的类是：

.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"
    }
  }
}

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

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

1 个答案: