Material UI - Overide disabled styles for InputBase

user_2170696 0
Viewed 13072

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

jss material-ui reactjs
3 Answers

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

Edit Invisible Backdrop

user_106414220

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"
/>
user_50073320

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>
    );
}
user_168016440
Related