[InputLabel] Override classes of inner FormLabel

[slavab89]

When creating a text field using the different component, it doesnt seem to be possible to control the classes of the FormLabel component that InputLabel creates.

I was trying to override the error class to color it differently

<FormControl error>
  <InputLabel htmlFor="something" classes={{ error: classes.differentError}}>My Label</InputLabel> // Works
  <Input id="something" {...input} classes={{ error: classes.differentError }} /> // error is an unknown class
  <FormHelperText classes={{ error: classes.differentError}}>{errorText}</FormHelperText> // Works
</FormControl>

Material-UI: v1.0.0-beta.8

[oliviertassinari]

Looking at the source code, the actual behavior should be the other way around.

Could you provide a reproduction test case? That would help a lot 👷 .
A live example would be perfect. You can use codesandbox.io or webpackbin.com.
I'm closing. Once you have one, feel free to open a new issue. Thanks!

[marcusjwhelan]

I also have been confused on how to do styling based on current state. in 0.19 you could but in V1 you cannot set label color based on state anymore.

[slavab89]

@oliviertassinari Could you please clarify what you meant by "other way around"?
The snippet that i've put is from the doc site, i just added the classes prop
https://codesandbox.io/s/xoqnzyry2q

[oliviertassinari]

The following should do it.

<FormControl error>
  <InputLabel htmlFor="something" FormControlClasses={{ error: classes.differentError}}>My Label</InputLabel>
  <Input id="something" {...input} classes={{ error: classes.differentError }} />
  <FormHelperText classes={{ error: classes.differentError}}>{errorText}</FormHelperText>
</FormControl>