Material UI - Overide disabled styles for InputBase

Question

I can't seem to find a way to override the following rule on an InputBase:

.MuiInputBase-root.Mui-disabled {
    color: rgba(0, 0, 0, 0.38);
}

The rule I want to apply is: color: "rgba(0, 0, 0, 0.75)"

I've tried using classname and classes but nothing is working. Any ideas?

textField: {
  marginLeft: theme.spacing(1),
  marginRight: theme.spacing(1),
  '&:disabled': {
    color: "rgba(0, 0, 0, 0.75)"
  }    
},
disabled: {
  color: "rgba(0, 0, 0, 0.75)",
  '&:disabled': {
    color: "rgba(0, 0, 0, 0.75)"
  }
}

<TextField
  disabled
  id="outlined-disabled"
  label="Disabled"
  defaultValue="Hello World"
  className={classes.textField}
  classes={{
    root: classes.disabled,
    disabled: classes.disabled
  }}
  margin="normal"
  variant="outlined"
/>

Codesandbox: https://codesandbox.io/s/material-demo-3xb7n

Niu

Answer 1

TextField doesn't support disabled rule name. You need to provide InputProps to TextField, and there you can provide disabled rule name:

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

const useStyles = makeStyles(theme => ({
  container: {
    display: "flex",
    flexWrap: "wrap"
  },
  textField: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1)
  },
  inputRoot: {
    '&$disabled': {
      color:'red'
    },
  },
  disabled: {}
}));

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

  return (
    <form className={classes.container} noValidate autoComplete="off">
      <TextField
        disabled
        id="outlined-disabled"
        label="Disabled"
        defaultValue="Hello World"
        InputProps={{
          classes:{
            root: classes.inputRoot,
            disabled: classes.disabled
          }
        }}
        margin="normal"
        variant="outlined"
      />
    </form>
  );
}

Amadeo

Genius, thank you! I thought I tried with InputProps already but it didn't work, I must have done something wrong. – Niu

you're welcome :) btw, maybe you tried with inputProps (lower i)? this prop is also available, quite confusing – Amadeo

Answer 2

This is what worked for me with MaterialUI version 5.x.

The new version of MaterialUI has a different way of defining overrrides.

import { createTheme, ThemeProvider } from '@mui/material/styles';


export default createTheme({
    palette: {
    components: {
        MuiInputBase: {
            styleOverrides: {
                root: {
                    '&.Mui-disabled': {
                        color: red[500],
                        backgroundColor: grey[400],
                    }
                }
            }
        }
    },
});

Fluid

Answer 3

I want to provide another answer to this question. I found it while I was using the InputBase component, but it also works for TextField and the other input components provided by Material UI.

You are able to use nested selectors to style these types of components. When you create a TextField, by default it creates an HTML input element on the webpage. This is what you want to style.

For example, if you wanted to alter the color of the text from black to gray when the TextField is disabled, you could use this for your theme:

const useStyles = theme => ({
  textField: {
    '& input': {
      color: '#000000',
    },
    '& input:disabled': {
      color: '#CCCCCC',
    },
  },
});

And then, for the element, you would only need to set its class. There are no InputProps needed.

<TextField
  disabled
  id="outlined-disabled"
  label="Disabled"
  defaultValue="Hello World"
  className={classes.textField}
  margin="normal"
  variant="outlined"
/>

Sensibility

Answer 4

Below is the code snippet that should work for you...

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

export default function DisabledTextInput (props) {
    const disabledFlag = true;

    const theme = createMuiTheme({
       overrides: {
             MuiInputBase: {
                root: {
                    "&$disabled": {
                        color: "rgba(0, 0, 0, 0.75)"
                    }
                }
            },
        },
    });

    return (
        <ThemeProvider theme={theme}>
            <TextField
                variant="outlined"
                disabled={disabledFlag}
                ...
            />
        </ThemeProvider>
    );
}

Bibby

Please add further details to expand on your answer, such as working code or documentation citations. – Lorou