如何在不使用的情况下更改Material-UI TextField底部颜色<MuiThemeProvider />

Question

I have a Material UI TextField component that is on a dark background, so for just this one component, I'd like to change it so that the text and line colours are all red. The rest of the TextField instances should remain unchanged.

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

Answer 1

Add this props in <TextField />

InputLabelProps={{
  className: classes.cssLabels
}}

Add in styles

cssLabels: {
  color: "red"
}      

Answer 2

If you want to override the Input 's classes, you'll have to use something like this:

<TextField
  InputProps={{classes:{underline: classes.underline}}}
  ...
/>