如何使用reactjs中的材质ui以红色显示helperText

我的目标是以红色显示helperText，正如我们在错误时间中显示的那样。但我没能做到。 我想不出我错在哪里了

代码如下：

class Sample extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      channel: -1,
      sports: -1,
      movie: ""
    };
  }
  handleChange = (e: any) => {
    this.setState({ channel: e.target.value });
  };
  handleSports = (e: any) => {
    this.setState({ sports: e.target.value });
  };

  handleMovie = (e: any) => {
    this.setState({ movie: e.target.value });
  };

  Valid = () => {
    const errors = { channel: "", sports: "", movie: "" };
    if (!this.state.channel) {
      errors.channel = "Please select channel";
    }
    if (!this.state.sports) {
      errors.sports = "select Sports";
    }
    if (!this.state.movie) {
      errors.movie = "select movie";
    }
    return {
      errors,
      isSubmit: Object.keys(errors).length === 0
    };
  };

  handleSubmit = (e: any) => {
    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 (
      <>
        <FormControl>
          <Select
            defaultValue={-1}
            onChange={this.handleChange}
            displayEmpty
            inputProps={{ "aria-label": "Without label" }}
          >
            <MenuItem value={-1}>Select Channel</MenuItem>
            <MenuItem value={10}>Sports</MenuItem>
            <MenuItem value={20}>Entertainment</MenuItem>
          </Select>
          {!this.state.channel ? (
            <FormHelperText>{errors.channel}</FormHelperText>
          ) : null}
        </FormControl>
        {this.state.channel === 10 ? (
          <div>
            <FormControl>
              <Select
                defaultValue={-1}
                onChange={this.handleSports}
                displayEmpty
                inputProps={{ "aria-label": "Without label" }}
              >
                <MenuItem value={-1}>Select </MenuItem>
                <MenuItem value={10}>Star sports 1</MenuItem>
                <MenuItem value={20}>Star sports 2</MenuItem>
              </Select>
              {!this.state.sports ? (
                <FormHelperText>{errors.sports}</FormHelperText>
              ) : null}
            </FormControl>
          </div>
        ) : this.state.channel === 20 ? (
          <div>
            <FormControl>
              <Select
                defaultValue={-1}
                onChange={this.handleMovie}
                displayEmpty
                inputProps={{ "aria-label": "Without label" }}
              >
                <MenuItem value={-1}>Select</MenuItem>
                <MenuItem value={10}>Star Movies</MenuItem>
                <MenuItem value={20}>ABC</MenuItem>
              </Select>
              {!this.state.movie ? (
                <FormHelperText>{errors.movie}</FormHelperText>
              ) : null}
            </FormControl>
          </div>
        ) : null}
        <div>
          <Button disabled={isSubmit} onClick={this.handleSubmit}>
            Submit
          </Button>
        </div>
      </>
    );
  }
}
export default Sample;

类示例扩展了React.Component{
建造师（道具：道具）{
超级（道具）；
此.state={
频道：-1，
体育：-1，
电影：“
};
}
handleChange=（e:any）=>{
this.setState（{channel:e.target.value}）；
};
handleSports=（e:any）=>{
this.setState（{sports:e.target.value}）；
};
handleMovie=（e:any）=>{
this.setState（{movie:e.target.value}）；
};
有效=（）=>{
常量错误={频道：，体育：，电影：}；
如果（！this.state.channel）{
errors.channel=“请选择频道”；
}
如果（！this.state.sports）{
errors.sports=“选择运动”；
}
如果（！this.state.movie）{
errors.movie=“选择电影”；
}
返回{
错误，
isSubmit:Object.keys（错误）。长度==0
};
};
handleSubmit=（e:any）=>{
e、 预防默认值（）；
常数数据={
频道：this.state.channel，
体育：这是国家体育，
电影：这部
};
控制台日志（数据）；
};
render（）{
const{errors，isSubmit}=this.Valid（）；
返回(
选择频道
体育
游戏娱乐
{！这是国家频道吗(
{errors.channel}
)：null}
{this.state.channel==10(
挑选
明星体育1
明星体育2
{！这是州立体育吗(
{errors.sports}
)：null}
)：this.state.channel==20(
挑选
明星电影
基础知识
{！这是州立电影吗(
{errors.movie}
)：null}
)：null}
提交
);
}
}
导出默认样本；

我不知道为什么它不是红色的。在这个问题上苦苦挣扎。

---

有人能帮我查询吗？

像这样传递错误道具：

    <FormControl error={!this.state.channel}>
      <Select
        defaultValue={-1}
        onChange={this.handleChange}
        displayEmpty
        inputProps={{ "aria-label": "Without label" }}
      >
        <MenuItem value={-1}>Select Channel</MenuItem>
        <MenuItem value={10}>Sports</MenuItem>
        <MenuItem value={20}>Entertainment</MenuItem>
      </Select>
      {!this.state.channel ? (
        <FormHelperText>{errors.channel}</FormHelperText>
      ) : null}
    </FormControl>

选择频道
体育
游戏娱乐
{！这是国家频道吗(
{errors.channel}
)：null}

还是像这样

    <FormHelperText error>{errors.channel}</FormHelperText>

{errors.channel}

---

以下是文档：

您希望文本“选择电影”为红色吗？@edison16029-您好，是的，我已将helpertext保留了3个下拉列表，如果他们不选择任何下拉列表值，则我希望显示应以红色显示的helpertext。你能帮我一下吗？你有没有试着把style={{color:“red”}添加到。比如{errors.channel}它在沙箱中工作，请告诉我它是否工作