javascript - 如何覆盖禁用的 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

这是一个关于如何自己做的“演练”:

检查 html 输出:

在新选项卡中打开图像以检查标记。
正如您所看到的 - 标签实际上不是 fieldset 标签的父标签，它是绘制边框的标签。

字段集位于 div.MuiInputBase 内，这也是禁用的，所以我不得不添加 &$disabled在MuiInputBase的根上.

至于& fieldset - fieldset element 是 MuiInputBase 的子元素- 所以&之间的空间并且标签名意味着这是一个子元素。

fieldset 元素具有 MuiOutlinedInput-notchedOutline所以我用它作为相关的选择器。你可能只使用 .MuiOutlinedInput-root.Mui-disabled fieldset没有最后一个选择器。尝试一下 :-)。