Material-ui: Asteriks class for TextField

[e11en]

FormControlClassKey does not include the ability to add a class to the asterisk set by the required prop of a TextField.

I would like to be able to do:

<TextField classes={{asterisk: 'asterisk'}} />

...

'.asterisk': { color: 'blue' }

Current situation has no ability to do this and in my styling I need to do this:

'> label > span': { color: 'blue' }

[oliviertassinari]

@e11en Here you go:

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";

const styles = theme => ({
  asterisk: {
    color: "red"
  }
});

function TextFields(props) {
  const { classes } = props;

  return (
    <form noValidate autoComplete="off">
      <TextField
        required
        InputLabelProps={{
          FormLabelClasses: {
            asterisk: classes.asterisk
          }
        }}
        id="standard-required"
        label="Required"
        defaultValue="Hello World"
        margin="normal"
      />
    </form>
  );
}

TextFields.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(TextFields);

https://codesandbox.io/s/kxvv9w085r

[oliviertassinari]

But yeah, we could add an asterisk style rule to the InputLabel component so you can do:

      <TextField
        required
        InputLabelProps={{
          classes: {
            asterisk: classes.asterisk
          }
        }}
        id="standard-required"
        label="Required"
        defaultValue="Hello World"
        margin="normal"
      />

instead. Do you want to work on it? :)

[e11en]

Ah yeah of course! I didn't think of that way of adding the class name. Thanks! I'll have a look at adding that style rule

[eps1lon]

FormLabel docs are also missing a comment about the asterisk class. It is listed as a class key but not explanation about the purpose: https://material-ui.com/api/form-label/#css

[umairfarooq44]

@e11en @oliviertassinari If anyone is not working on this, would love to make PR. Thanks

[oliviertassinari]

@umairfarooq44 We would be honored to review your pull request :)

[umairfarooq44]

@oliviertassinari thanks for assigning issue. The solution should be in InputLabel component remove FormLabelClasses and use only classes from props. As FormLabelClasses and classes are two props for same purpose. Also asterisk should be included in documentation of InputLabel css API.