How to change Material-UI TextField bottom and label color on error and on focus

问题

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

回答1:

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

来源：https://stackoverflow.com/questions/54052525/how-to-change-material-ui-textfield-bottom-and-label-color-on-error-and-on-focus