Material-UI | How to change the colour of a disabled textfield?

user_9651131 0
Viewed 6739

I would like to change the colour of the disabled text displayed in the textfield it is currently too light:

enter image description here

I would like the colour to be darker then this. I have tried the following:

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)

It is Similar to this question: Material UI | How to change the font colour of a disabled input text field?

jsx material-ui reactjs javascript
5 Answers

I think this could work. You can custom all your material-ui component with a custom theme. You will have to change the palette.text.disabled property.

To do so, here's an exemple:

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>
  );
}
user_122674560

For those struggling with this on MUI V5:

You would think you have to target the color property as you would in the non-disabled state. Turns out you have to target the -webkit-text-fill-color property like what Andrea suggested.

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,
       },
  }));
user_148170880

You can make use of className to TextField. Pass on a disabled class style and use "& .MuiInputBase-root.Mui-disabled": { class to style the disabled input

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);
user_59281860
user_123185620 
<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"
},
user_128185850
Related