如何覆盖禁用的 Material UI TextField 的全局边框颜色样式？

Question

我试图覆盖已禁用的 Mui TextField 组件的全局样式，但无法更改边框颜色。

如果该字段被禁用，我已经设法更改标签颜色，但不能更改边框颜色。这是我到目前为止所拥有的：

export const theme = createMuiTheme({
  overrides: {
    // For label
    MuiInputLabel: {
      root: {
        '&$disabled': {
          color: '#000000',
        },
      },
    },
    // For border color of field (doesn't work)
    MuiTextField: {
      root: {
        '&$disabled': {
          borderColor: '#FFFFFF'
        },
      },
    },
  },
});

我尝试过各种变化，包括，

    MuiOutlinedInput: {
      root: {
        fieldset: {
          borderColor: '#FFFFFF',
        },
      }
    }

但这只会改变非禁用字段的边框颜色。我在这里做错了什么？它看起来是这样的：

Answer 1

边框是从fieldset元素中获取的。您可以根据需要设置样式：

MuiInputBase: {
  root: {
    "&$disabled": {
      '& fieldset.MuiOutlinedInput-notchedOutline': {
        borderColor: "blue",
        background: "grey"
      }
    }
  }
}

您可以在这里找到一个工作示例：https://codesandbox.io/s/material-styling-disabled-textfield-ckp14 ?file=/demo.js

以下是如何自行操作的“演练”：

1. 检查 html 输出：
2. 在新选项卡中打开图像以检查标记。
   正如您所看到的 - 该标签实际上不是 fieldset 标签的父级，而 fieldset 标签是绘制边框的标签。
3. 字段集位于 内部div.MuiInputBase，它也被禁用，所以我必须&$disabled在 的根目录中添加MuiInputBase。
4. 至于& fieldset-fieldset元素是 - 的子元素，因此 -和标记名称MuiInputBase之间的空格意味着这是一个子元素。&
5. fieldset 元素具有，MuiOutlinedInput-notchedOutline因此我将其用作相关选择器。您可能可以.MuiOutlinedInput-root.Mui-disabled fieldset在没有最后一个选择器的情况下使用。尝试一下 ：-）。