如何更改禁用输入中的文本颜色？答案

【问题标题】：How to change the text color inside an disabled input?如何更改禁用输入中的文本颜色？
【发布时间】：2020-04-24 10:57:06
【问题描述】：

我正在尝试在禁用但不工作时对输入内的文本应用不同的颜色。我正在使用 Material Ui

import React from "react";
    import { makeStyles } from "@material-ui/core/styles";
    import Input from "@material-ui/core/Input";

    const useStyles = makeStyles(theme => ({
      inputText: {
        color: "blue"
      }
    }));

    export default function Inputs() {
      const classes = useStyles();

      return (
        <form className={classes.root} noValidate autoComplete="off">
          <Input
            className={classes.inputText}
            defaultValue="Disabled"
            disabled
            inputProps={{ "aria-label": "description" }}
          />
        </form>
      );
    }

https://codesandbox.io/s/material-demo-lq3e9

【问题讨论】：

您能否在样式表中添加input:disabled { color: red; }，用您想要的颜色代替“红色”。
不起作用，您可以在此链接中执行此操作吗？ codesandbox.io/s/material-demo-lq3e9

标签： html css reactjs material-ui

【解决方案1】：

我在你的沙盒链接中找不到你的样式表，所以我添加了一个样式标签，它起作用了。

<style>
    input:disabled{
      color:blue;
    }
</style>

【讨论】：

这个不行，样式在demo.js里面，我在jss文件里试试这个

【解决方案2】：

var disabledElements = document.querySelectorAll('input[disabled]');

for (var i = 0, n = disabledElements.length; i < n; ++i) {
  disabledElements[i].style.color = 'red';
}

<input disabled value="green" />
<input value="red" />
<input disabled />

【讨论】：

您使用的是普通输入，我需要知道如何为 Material UI 组件应用这种样式
如果您能帮助我了解它在 UI 中的呈现方式，也许我可以在这方面为您提供更多帮助。
如我所见，最后，它被编译为我用于 HTML 的示例。因此，理想情况下，它应该可以工作。只是你需要看看什么时候调用这个方法。
您可以编辑我发给您的链接并在此处发布吗？