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

Question

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

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

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 | 如何更改禁用的输入文本字段的字体颜色？

Answer 1

我认为这可行。您可以使用自定义主题自定义所有 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>
  );
}

Answer 2

对于那些在 MUI V5 上遇到此问题的人：

color您可能会认为您必须像在非禁用状态下一样瞄准该财产。事实证明，你必须-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,
       },
  }));