css - React - 基于 View 更改组件中文本的颜色

Question

我有一个用于发表评论的组件，我想根据应用程序的 View (或状态？)更改颜色。

我正在使用这个组件

  <Grid item xs={6}>
        <Typography variant="subtitle1" color="secondary">
          Previous comments:
        </Typography>
        <CommentHistory comments={comments} />
      </Grid>

在一个更大的组件中，我想根据我在哪个更大的组件中使用它来更改版式文本颜色。案例是一个从服务返回的字段，但是我想根据以下内容更改类名这个较小的组件正在使用哪个组件。

   return comments.map(comment => {
          return comment && this.renderComment(comment);
        });
      }

   private renderComment(comment: Map<{}, {}>) {
    const { classes } = this.props;
    let from: React.ReactNode;

    switch (comment.getIn(["from", "role"])) {
      case "ROLE_MENTOR":
        from = (
          <Typography
            variant="body2"
            className={classnames(
              classes.commentFromMentor,
              "comment-from comment-from--mentor"
            )}>
            Mentor POC
          </Typography>
        );
        break;
      case "ROLE_OSBP_SUPPORT":
        from = (
          <Typography
            variant="body2"
            className={classnames(
              classes.commentFromOsbpSupport,
              "comment-from comment-from--osbp_support"
            )}>
            Mentor Protégé Program Reviewer
          </Typography>
        );
        break;
      default:
        from = (
          <Typography variant="body2" className="comment-from">
            Unknown Commenter
          </Typography>
        );
        break;
    }
}

Answer 1

你可以根据状态来做。拿一个状态元素让我们说 textRed 如果它的真实颜色是 red 否则颜色将是 black 。我会告诉你如何做到这一点

state = {textRed: false;}

只要您希望它为真，就可以按照您想要的方式更改状态逻辑。

现在在 React 组件中

        <Grid item xs={6}>
        <Typography className ={this.state.textRed === false? "secondary" : "danger"} variant="subtitle1">
          Previous comments:
        </Typography>
        <CommentHistory comments={comments} />
      </Grid>