材质-UI |如何更改禁用文本字段的颜色？答案

【问题标题】：Material-UI | How to change the colour of a disabled textfield?材质-UI |如何更改禁用文本字段的颜色？
【发布时间】：2020-09-28 10:12:25
【问题描述】：

我想更改文本字段中显示的禁用文本的颜色，它目前太亮了：

我希望颜色比这个更深。我尝试了以下方法：

import { withStyles } from '@material-ui/styles';
import TextField from '@material-ui/core/TextField';

const styles = {
   disabledInput: {
           color:'black',
      },
 },


class MainForm extends React.Component {render() {


    render() 

       return (

            <TextField
              margin="dense"
              variant="outlined"
              disabled= true
              InputProps={{className: { disabled: this.props.classes.disabledInput }}}
             />

      ); 
   }
}

export default withStyles(styles)(DynamicForm)

类似于这个问题：Material UI | How to change the font colour of a disabled input text field?

【问题讨论】：

为什么不使用文本字段的 .root 类仅在禁用时覆盖文本字段的颜色？
其他问题中给出的答案不适合您吗？
您分享的链接与我在评论中提到的相同。
是的，我不确定如何将它应用到我的类组件

标签： javascript reactjs material-ui jsx

【解决方案1】：

对于那些在 MUI V5 上苦苦挣扎的人：

您会认为您必须像在非禁用状态下一样定位color 属性。事实证明，您必须像 Andrea 建议的那样定位 -webkit-text-fill-color 属性。

import { styled } from "@mui/material/styles"
import { TextField, TextFieldProps } from "@mui/material";

const CustomTextField = styled(TextField)<TextFieldProps>(
  ({ theme }) => ({
    "& .MuiInputBase-input.MuiInput-input.Mui-disabled": {
       "-webkit-text-fill-color": theme.palette.primary.main,
       },
  }));

【讨论】：

【解决方案2】：

<TextField
  className={classes.multilineTextField}
  value="YOUR VALUE"
  contentEditable={false}
/>

...

multilineTextField: {
  backgroundColor: "rgba(255,255,255,1)",
  color: "rgba(0,0,0,1) !important",
  "-webkit-text-fill-color": "black !important",
  cursor: "none"
},

【讨论】：

【解决方案3】：

我已经编辑了沙盒，请检查

https://codesandbox.io/s/disabled-text-color-siyb6?file=/demo.js

希望这会有所帮助。

【讨论】：

【解决方案4】：

我认为这可行。您可以使用自定义主题自定义所有 material-ui 组件。您将不得不更改 palette.text.disabled 属性。

为此，举个例子：

import React from 'react';
import TextField from '@material-ui/core/TextField';
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';

const theme = createMuiTheme({
  palette: {
    text: {
      disabled: '#eee'
    }
  },
});

export default function Example() {
  return (
    <ThemeProvider theme={theme}>
      <TextField disabled= true/>
    </ThemeProvider>
  );
}

【讨论】：

【解决方案5】：

您可以使用 className 到 TextField。传递禁用的类样式并使用"& .MuiInputBase-root.Mui-disabled": { 类来设置禁用输入的样式

import { withStyles } from "@material-ui/styles";
import TextField from "@material-ui/core/TextField";
import React from "react";

const styles = {
  disabledInput: {
    "& .MuiInputBase-root.Mui-disabled": {
      color: "black"
    }
  }
};

class MainForm extends React.Component {
  render() {
    return (
      <TextField
        value={"disabled"}
        margin="dense"
        variant="outlined"
        disabled={true}
        className={this.props.classes.disabledInput}
      />
    );
  }
}

export default withStyles(styles)(MainForm);

【讨论】：

不工作，而且如果MaterialUI开发人员将名称更改为“MuiInputBase-root.Mui-disabled”怎么办？