Mixing
React - Change Color of Text in Component Based on View
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
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;
}
}
css reactjs typescript react-native types
edited Jan 3 at 5:43
Praveen Rao Chavan.G
1,589821
asked Jan 3 at 4:52
Kory J. CampbellKory J. Campbell
408
add a comment |
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;
}
}
css reactjs typescript react-native types
edited Jan 3 at 5:43
Praveen Rao Chavan.G
1,589821
asked Jan 3 at 4:52
Kory J. CampbellKory J. Campbell
408
Why don't you just pass a class name with the required CSS, from the component it's being used in?
– Maaz Syed Adeeb
Jan 3 at 5:08
@MaazSyedAdeeb because I have to use this component in more than one place, however the text color will be different depending on where it's being used
– Kory J. Campbell
Jan 3 at 14:33
I understand that. My question is: can't you pass a different classname in every place where it's being used? That way, you can control the style from the place you're consuming this smaller component
– Maaz Syed Adeeb
Jan 3 at 14:55
can you show me an example? I'm a little confused on what/how this would be possible if we're using the component itself in another component. Not rewriting the content of the component in each instance/
– Kory J. Campbell
Jan 3 at 15:22
add a comment |
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;
}
}
css reactjs typescript react-native types
edited Jan 3 at 5:43
Praveen Rao Chavan.G
1,589821
asked Jan 3 at 4:52
Kory J. CampbellKory J. Campbell
408
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;
}
}
css reactjs typescript react-native types
css reactjs typescript react-native types
edited Jan 3 at 5:43
Praveen Rao Chavan.G
1,589821
asked Jan 3 at 4:52
Kory J. CampbellKory J. Campbell
408
edited Jan 3 at 5:43
Praveen Rao Chavan.G
1,589821
asked Jan 3 at 4:52
Kory J. CampbellKory J. Campbell
408
edited Jan 3 at 5:43
Praveen Rao Chavan.G
1,589821
edited Jan 3 at 5:43
Praveen Rao Chavan.G
1,589821
edited Jan 3 at 5:43
Praveen Rao Chavan.G
1,589821
1,589821
asked Jan 3 at 4:52
Kory J. CampbellKory J. Campbell
408
asked Jan 3 at 4:52
Kory J. CampbellKory J. Campbell
408
asked Jan 3 at 4:52
Kory J. CampbellKory J. Campbell
408
408
Why don't you just pass a class name with the required CSS, from the component it's being used in?
– Maaz Syed Adeeb
Jan 3 at 5:08
@MaazSyedAdeeb because I have to use this component in more than one place, however the text color will be different depending on where it's being used
– Kory J. Campbell
Jan 3 at 14:33
I understand that. My question is: can't you pass a different classname in every place where it's being used? That way, you can control the style from the place you're consuming this smaller component
– Maaz Syed Adeeb
Jan 3 at 14:55
can you show me an example? I'm a little confused on what/how this would be possible if we're using the component itself in another component. Not rewriting the content of the component in each instance/
– Kory J. Campbell
Jan 3 at 15:22
add a comment |
Why don't you just pass a class name with the required CSS, from the component it's being used in?
– Maaz Syed Adeeb
Jan 3 at 5:08
@MaazSyedAdeeb because I have to use this component in more than one place, however the text color will be different depending on where it's being used
– Kory J. Campbell
Jan 3 at 14:33
I understand that. My question is: can't you pass a different classname in every place where it's being used? That way, you can control the style from the place you're consuming this smaller component
– Maaz Syed Adeeb
Jan 3 at 14:55
can you show me an example? I'm a little confused on what/how this would be possible if we're using the component itself in another component. Not rewriting the content of the component in each instance/
– Kory J. Campbell
Jan 3 at 15:22
Why don't you just pass a class name with the required CSS, from the component it's being used in?
– Maaz Syed Adeeb
Jan 3 at 5:08
Why don't you just pass a class name with the required CSS, from the component it's being used in?
– Maaz Syed Adeeb
Jan 3 at 5:08
@MaazSyedAdeeb because I have to use this component in more than one place, however the text color will be different depending on where it's being used
– Kory J. Campbell
Jan 3 at 14:33
@MaazSyedAdeeb because I have to use this component in more than one place, however the text color will be different depending on where it's being used
– Kory J. Campbell
Jan 3 at 14:33
I understand that. My question is: can't you pass a different classname in every place where it's being used? That way, you can control the style from the place you're consuming this smaller component
– Maaz Syed Adeeb
Jan 3 at 14:55
I understand that. My question is: can't you pass a different classname in every place where it's being used? That way, you can control the style from the place you're consuming this smaller component
– Maaz Syed Adeeb
Jan 3 at 14:55
can you show me an example? I'm a little confused on what/how this would be possible if we're using the component itself in another component. Not rewriting the content of the component in each instance/
– Kory J. Campbell
Jan 3 at 15:22
can you show me an example? I'm a little confused on what/how this would be possible if we're using the component itself in another component. Not rewriting the content of the component in each instance/
– Kory J. Campbell
Jan 3 at 15:22
add a comment |
2 Answers
2
active
oldest
votes
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>
answered Jan 3 at 5:07
user3425054user3425054
84
ok I understand, however how would I get the state of the current component that I'm viewing on the application? @user3425054
– Kory J. Campbell
Jan 3 at 14:47
add a comment |
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>answered Jan 3 at 15:37
Maaz Syed AdeebMaaz Syed Adeeb
2,65721426
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54016527%2freact-change-color-of-text-in-component-based-on-view%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
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>
answered Jan 3 at 5:07
user3425054user3425054
84
ok I understand, however how would I get the state of the current component that I'm viewing on the application? @user3425054
– Kory J. Campbell
Jan 3 at 14:47
add a comment |
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>
answered Jan 3 at 5:07
user3425054user3425054
84
ok I understand, however how would I get the state of the current component that I'm viewing on the application? @user3425054
– Kory J. Campbell
Jan 3 at 14:47
add a comment |
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>
answered Jan 3 at 5:07
user3425054user3425054
84
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>
answered Jan 3 at 5:07
user3425054user3425054
84
answered Jan 3 at 5:07
user3425054user3425054
84
answered Jan 3 at 5:07
user3425054user3425054
84
answered Jan 3 at 5:07
user3425054user3425054
84
84
ok I understand, however how would I get the state of the current component that I'm viewing on the application? @user3425054
– Kory J. Campbell
Jan 3 at 14:47
add a comment |
ok I understand, however how would I get the state of the current component that I'm viewing on the application? @user3425054
– Kory J. Campbell
Jan 3 at 14:47
ok I understand, however how would I get the state of the current component that I'm viewing on the application? @user3425054
– Kory J. Campbell
Jan 3 at 14:47
ok I understand, however how would I get the state of the current component that I'm viewing on the application? @user3425054
– Kory J. Campbell
Jan 3 at 14:47
add a comment |
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>answered Jan 3 at 15:37
Maaz Syed AdeebMaaz Syed Adeeb
2,65721426
add a comment |
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>answered Jan 3 at 15:37
Maaz Syed AdeebMaaz Syed Adeeb
2,65721426
add a comment |
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>answered Jan 3 at 15:37
Maaz Syed AdeebMaaz Syed Adeeb
2,65721426
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>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>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>answered Jan 3 at 15:37
Maaz Syed AdeebMaaz Syed Adeeb
2,65721426
answered Jan 3 at 15:37
Maaz Syed AdeebMaaz Syed Adeeb
2,65721426
answered Jan 3 at 15:37
Maaz Syed AdeebMaaz Syed Adeeb
2,65721426
answered Jan 3 at 15:37
Maaz Syed AdeebMaaz Syed Adeeb
2,65721426
2,65721426
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54016527%2freact-change-color-of-text-in-component-based-on-view%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Why don't you just pass a class name with the required CSS, from the component it's being used in?
– Maaz Syed Adeeb
Jan 3 at 5:08
@MaazSyedAdeeb because I have to use this component in more than one place, however the text color will be different depending on where it's being used
– Kory J. Campbell
Jan 3 at 14:33
I understand that. My question is: can't you pass a different classname in every place where it's being used? That way, you can control the style from the place you're consuming this smaller component
– Maaz Syed Adeeb
Jan 3 at 14:55
can you show me an example? I'm a little confused on what/how this would be possible if we're using the component itself in another component. Not rewriting the content of the component in each instance/
– Kory J. Campbell
Jan 3 at 15:22