I have a Material UI TextField ponent that needs some color customization for :

• error
• focused

I am using @material-ui/core 3.8.1 and it's <TextField /> ponent.

I want to avoid having to use <MuiThemeProvider>

This is how I have tried based on the remendation here for the Material-UI <Input /> ponent and the answer here

Reproduction:

I have a Material UI TextField ponent that needs some color customization for :

• error
• focused

I am using @material-ui/core 3.8.1 and it's <TextField /> ponent.

I want to avoid having to use <MuiThemeProvider>

This is how I have tried based on the remendation here for the Material-UI <Input /> ponent and the answer here

Reproduction: https://codesandbox.io/s/q9yj0y74z6

• javascript
• reactjs
• ecmascript-6
• material-ui

• You can use the overriding with classes method, have a look at the '<Input/>' ponent implementation it seems that the bottom line color on error is underline: {'&$error:after': {...}}. For the label, you need to override the InputLabelProps: {{classes: ....}} – Titus Commented Jan 5, 2019 at 13:39
• For &$error:after, this is already what I have on my reproduction. For InputLabelProps, I have tried many bination including classes, none of them worked. – Dimitri Kopriwa Commented Jan 5, 2019 at 13:41
• '&$error:after' needs to be added to the InputProps: {{classes: ....}} – Titus Commented Jan 5, 2019 at 13:42
• This is already what I have in my reproduction =/ – Dimitri Kopriwa Commented Jan 5, 2019 at 13:43

2 Answers 2

As already stated in the ments, you need to override the classes property.

The &$ syntax refers to a class in the same stylesheet. You are nearly there with your example but you need to pass in an error class.

const styles = muiTheme => ({
  label: {
    "&$focusedLabel": {
      color: "cyan"
    },
    "&$erroredLabel": {
      color: "orange"
    }
  },
  focusedLabel: {},
  erroredLabel: {},
  underline: {
    "&$error:after": {
      borderBottomColor: "orange"
    },
    "&:after": {
      borderBottom: `2px solid cyan`
    }
  },
  error: {}
});

<TextFieldMui
      InputLabelProps={{
        classes: {
          root: classes.label,
          focused: classes.focusedLabel,
          error: classes.erroredLabel
        },
      }}
      InputProps={{
        classes: {
          root: classes.underline,
          error: classes.error
        }
      }}
      {...props}
    />

https://codesandbox.io/s/9z70kz5vnr

for Disable label and for input text color change example.

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)
  },
  label: {
    "&$disabled": {
      color: "black"
    }
  },
  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
          }
        }}
        InputLabelProps={{
          classes: {
            root: classes.label,
            disabled: classes.disabled
          }
        }}
        margin="normal"
        variant="outlined"
      />
    </form>
  );
}