title: How to show helperText in red color using material-ui in reactjs
body: <p>My objective is to show helperText in red color as we show in error time. But i couldn't make it.
  Couldn't able to figure it out where i'm going wrong.</p>
  <p>Here is the code:</p>
  <pre><code>class Sample extends React.Component&lt;Props, State&gt; {
    constructor(props: Props) {
      super(props);
      this.state = {
        channel: -1,
        sports: -1,
        movie: &quot;&quot;
      };
    }
    handleChange = (e: any) =&gt; {
      this.setState({ channel: e.target.value });
    };
    handleSports = (e: any) =&gt; {
      this.setState({ sports: e.target.value });
    };
  
    handleMovie = (e: any) =&gt; {
      this.setState({ movie: e.target.value });
    };
  
    Valid = () =&gt; {
      const errors = { channel: &quot;&quot;, sports: &quot;&quot;, movie: &quot;&quot; };
      if (!this.state.channel) {
        errors.channel = &quot;Please select channel&quot;;
      }
      if (!this.state.sports) {
        errors.sports = &quot;select Sports&quot;;
      }
      if (!this.state.movie) {
        errors.movie = &quot;select movie&quot;;
      }
      return {
        errors,
        isSubmit: Object.keys(errors).length === 0
      };
    };
  
    handleSubmit = (e: any) =&gt; {
      e.preventDefault();
      const data = {
        channel: this.state.channel,
        sports: this.state.sports,
        movie: this.state.movie
      };
      console.log(data);
    };
  
    render() {
      const { errors, isSubmit } = this.Valid();
      return (
        &lt;&gt;
          &lt;FormControl&gt;
            &lt;Select
              defaultValue={-1}
              onChange={this.handleChange}
              displayEmpty
              inputProps={{ &quot;aria-label&quot;: &quot;Without label&quot; }}
            &gt;
              &lt;MenuItem value={-1}&gt;Select Channel&lt;/MenuItem&gt;
              &lt;MenuItem value={10}&gt;Sports&lt;/MenuItem&gt;
              &lt;MenuItem value={20}&gt;Entertainment&lt;/MenuItem&gt;
            &lt;/Select&gt;
            {!this.state.channel ? (
              &lt;FormHelperText&gt;{errors.channel}&lt;/FormHelperText&gt;
            ) : null}
          &lt;/FormControl&gt;
          {this.state.channel === 10 ? (
            &lt;div&gt;
              &lt;FormControl&gt;
                &lt;Select
                  defaultValue={-1}
                  onChange={this.handleSports}
                  displayEmpty
                  inputProps={{ &quot;aria-label&quot;: &quot;Without label&quot; }}
                &gt;
                  &lt;MenuItem value={-1}&gt;Select &lt;/MenuItem&gt;
                  &lt;MenuItem value={10}&gt;Star sports 1&lt;/MenuItem&gt;
                  &lt;MenuItem value={20}&gt;Star sports 2&lt;/MenuItem&gt;
                &lt;/Select&gt;
                {!this.state.sports ? (
                  &lt;FormHelperText&gt;{errors.sports}&lt;/FormHelperText&gt;
                ) : null}
              &lt;/FormControl&gt;
            &lt;/div&gt;
          ) : this.state.channel === 20 ? (
            &lt;div&gt;
              &lt;FormControl&gt;
                &lt;Select
                  defaultValue={-1}
                  onChange={this.handleMovie}
                  displayEmpty
                  inputProps={{ &quot;aria-label&quot;: &quot;Without label&quot; }}
                &gt;
                  &lt;MenuItem value={-1}&gt;Select&lt;/MenuItem&gt;
                  &lt;MenuItem value={10}&gt;Star Movies&lt;/MenuItem&gt;
                  &lt;MenuItem value={20}&gt;ABC&lt;/MenuItem&gt;
                &lt;/Select&gt;
                {!this.state.movie ? (
                  &lt;FormHelperText&gt;{errors.movie}&lt;/FormHelperText&gt;
                ) : null}
              &lt;/FormControl&gt;
            &lt;/div&gt;
          ) : null}
          &lt;div&gt;
            &lt;Button disabled={isSubmit} onClick={this.handleSubmit}&gt;
              Submit
            &lt;/Button&gt;
          &lt;/div&gt;
        &lt;/&gt;
      );
    }
  }
  export default Sample;
  
  </code></pre>
  <p><a href="https://codesandbox.io/s/fast-surf-93364" rel="nofollow noreferrer">Here is the working sample</a></p>
  <p>I don't know why it is not appearing in red color. Struggling a lot with this issue.
  Can anyone please help me in this query?</p>