2

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

Dimitri Kopriwa
  • 13,139
  • 27
  • 98
  • 204

2 Answers2

3

Add this props in <TextField />

InputLabelProps={{
  className: classes.cssLabels
}}

Add in styles

cssLabels: {
  color: "red"
}
Dimitri Kopriwa
  • 13,139
  • 27
  • 98
  • 204
cvekaso
  • 833
  • 1
  • 11
  • 28
3

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

<TextField
  InputProps={{classes:{underline: classes.underline}}}
  ...
/>
Titus
  • 22,031
  • 1
  • 23
  • 33
  • Thanks, is it also possible to change the `font-family` this way? I am just using the mui `Input`. – Dimitri Kopriwa Jan 05 '19 at 12:19
  • @DimitriKopriwa Yes, you should be able to do that – Titus Jan 05 '19 at 12:21
  • How ? I have tried to set `typography.fontFamily` in `styles` and that didn't help =/ – Dimitri Kopriwa Jan 05 '19 at 12:21
  • @DimitriKopriwa Define a new class and then use: `input: classes.someClassName`. Those styles will be added directly to the `` element. You can change the font, text color, etc. – Titus Jan 05 '19 at 12:24
  • 1
    @DimitriKopriwa See my comment above for an example, If you want to use a font from the theme, I think it is something like `theme.typography.fontFamily....` – Titus Jan 05 '19 at 12:35
  • I was able using `clasName: `classes.someClassName` – Dimitri Kopriwa Jan 05 '19 at 12:42
  • Titus, maybe can you also help on that one? https://stackoverflow.com/questions/54052525/how-to-change-material-ui-textfield-bottom-and-label-color-on-error-and-on-focus – Dimitri Kopriwa Jan 05 '19 at 13:34