时间戳

首页 > 解决方案 > 如何覆盖禁用的 Material UI TextField 的全局边框颜色样式？

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

问题描述

我正在尝试覆盖已禁用的 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',
        },
      }
    }

但这只会改变非禁用字段的边框颜色。我在这里做错了什么？这是它的外观： 图像

标签： javascriptreactjsmaterial-ui

解决方案

边框是从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 标签的父标签，它是绘制边框的标签。
  3. 字段div.MuiInputBase集&$disabled在MuiInputBase.
  4. 至于& fieldset-fieldset元素是 - 的子元素，MuiInputBase因此 the&和标记名之间的空格表示这是一个子元素。
  5. fieldset 元素有，MuiOutlinedInput-notchedOutline所以我用它作为相关的选择器。您可能只使用.MuiOutlinedInput-root.Mui-disabled fieldset没有最后一个选择器。试试看 ：-）。

推荐阅读