1

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

  • error
  • focused

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

I want to avoid having to use <MuiThemeProvider>

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

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

Dimitri Kopriwa
  • 13,139
  • 27
  • 98
  • 204
  • You can use the *overriding with classes* method, have a look at the ['' component implementation](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Input/Input.js) it seems that the bottom line color on error is `underline: {'&$error:after': {...}}`. For the label, you need to override the `InputLabelProps: {{classes: ....}}` – Titus Jan 05 '19 at 13:39
  • For `&$error:after`, this is already what I have on my reproduction. For `InputLabelProps`, I have tried many combination including `classes`, none of them worked. – Dimitri Kopriwa Jan 05 '19 at 13:41
  • `'&$error:after'` needs to be added to the `InputProps: {{classes: ....}}` – Titus Jan 05 '19 at 13:42
  • This is already what I have in my reproduction =/ – Dimitri Kopriwa Jan 05 '19 at 13:43

2 Answers2

8

As already stated in the comments, 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

Josh Wooding
  • 812
  • 4
  • 7
  • This helps. Could you please send the material ui documentation link for the same? – Ashwini Jun 05 '19 at 15:04
  • @Ashwini https://material-ui.com/customization/components/#use-rulename-to-reference-a-local-rule-within-the-same-style-sheet Is this what you mean? – Josh Wooding Jun 07 '19 at 23:20
0

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>
  );
}
ganesh parajuli
  • 91
  • 4