CODEWITHSUNDEEP
cssreactjstypescriptreact-nativetypes
kjamp
kjamp

Reputation: 367

React - Change Color of Text in Component Based on View

I have a component in use for making comments and I want to change the color based on the view (or state?) of the application.

I'm using this component

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

in a larger component and I want to have the typography text color changed based on which larger component i'm using it in.The case is a field giving back from the service, however I want to change the class name based on which component this smaller component is being used.

   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;
    }
}

Upvotes: 0

Views: 2112

Answers (2)

maazadeeb
maazadeeb

Reputation: 6112

I've simulated a SmallComponent which is reused in components One and Two. SmallComponent just takes a prop called className and adds it to the element whose CSS is configurable from outside (in this case, it's a button). Then, we can pass a different className and style it as we like

const SmallComponent = ({ className, text }) => (
  <button className={className}>{text}</button>
);

const One = () => <SmallComponent text="From One" className="one" />;

const Two = () => <SmallComponent text="From Two" className="two" />;

const App = () => (
  <div>
    <One />
    <Two />
  </div>
);

ReactDOM.render(<App />, document.getElementById("app"));
.one {
  color: red;
}

.two {
  color: blue;
}
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="app"></div>

Upvotes: 0

Lakshya Khanna
Lakshya Khanna

Reputation: 63

You can do it on basis of state. take a state element lets say textRed if its true color will be red else color will be black . I will show you how you can do that

state = {textRed: false;}

change the state logic the way you want whenever you want it to be true.

now in react component 

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

Upvotes: 1

Related Questions