如何通过全局主题覆盖文件覆盖 MaterialUI 概述的输入？答案

【问题标题】：How do I override a MaterialUI outlined input through a global theme overrides file?如何通过全局主题覆盖文件覆盖 MaterialUI 概述的输入？
【发布时间】：2022-01-12 01:24:54
【问题描述】：

我正在处理包含我所有覆盖的主题文件，并且我正在尝试完成概述的输入但是，当我尝试这样做时，我得到了这个奇怪的错误。应用这些样式时，似乎有 2 个输入边框。

MUI 概述的输入覆盖部分：

MuiOutlinedInput: {
      styleOverrides: {
        root: {
          borderRadius: "4px",
          border: "1px solid green ",
          "&:hover": { borderRadius: "4px", border: "1px solid red" },
          "&:disabled": { borderRadius: "4px", border: "1px solid black" },
          "&.Mui-focused": { borderRadius: "4px", border: "2px solid blue" },
        },
      },
    },

非常感谢任何解决此问题的提示！

【问题讨论】：

标签： javascript css reactjs typescript material-ui

【解决方案1】：

如果您检查大纲输入，您会看到有 2 个子元素。第一个是输入元素，第二个是字段集元素。您需要将样式应用于字段集。

我不确定您要对样式做什么，因为您应用了 4 种不同的边框颜色...我猜您想要类似于

MuiOutlinedInput: {
      styleOverrides: {
        root: {
          "& fieldset" {
            borderColor: "red";
          }
        },
      },
    },

【讨论】：