React Is it good way to use classnames for managing multiple themes?
0
Consider the following code:-
render() {
const headerClasses=classnames({
"Header":true,
"Header---dark":this.props.theme.dark,
"Header--light":this.props.theme.light
})
return (
<div className={headerClasses}>
Header content goes here
</div>
)
}
My application is going to have only two themes. one dark and one light. I am trying to store the theme in redux store and changing the classnames accordingly using classnames. Is it a valid approach or an anti-pattern?. What is the easiest way to manage theme in larger application?
reactjs react-redux class-names
asked Nov 22 '18 at 12:52
Unity HourUnity Hour
15410
add a comment |
0
Consider the following code:-
render() {
const headerClasses=classnames({
"Header":true,
"Header---dark":this.props.theme.dark,
"Header--light":this.props.theme.light
})
return (
<div className={headerClasses}>
Header content goes here
</div>
)
}
My application is going to have only two themes. one dark and one light. I am trying to store the theme in redux store and changing the classnames accordingly using classnames. Is it a valid approach or an anti-pattern?. What is the easiest way to manage theme in larger application?
reactjs react-redux class-names
asked Nov 22 '18 at 12:52
Unity HourUnity Hour
15410
Arguably the easiest way would be to set a single class on thebodyelement (e.g.theme-light). Based on that, you can then change all your styles within CSS only. Your approach seems to be very repetitive as you would have to add that everywhere.
– str
Nov 22 '18 at 12:56
I would check out Styled Components. It has support for multiple themes
– weibenfalk
Nov 22 '18 at 13:04
add a comment |
0
0
0
Consider the following code:-
render() {
const headerClasses=classnames({
"Header":true,
"Header---dark":this.props.theme.dark,
"Header--light":this.props.theme.light
})
return (
<div className={headerClasses}>
Header content goes here
</div>
)
}
My application is going to have only two themes. one dark and one light. I am trying to store the theme in redux store and changing the classnames accordingly using classnames. Is it a valid approach or an anti-pattern?. What is the easiest way to manage theme in larger application?
reactjs react-redux class-names
asked Nov 22 '18 at 12:52
Unity HourUnity Hour
15410
Consider the following code:-
render() {
const headerClasses=classnames({
"Header":true,
"Header---dark":this.props.theme.dark,
"Header--light":this.props.theme.light
})
return (
<div className={headerClasses}>
Header content goes here
</div>
)
}
My application is going to have only two themes. one dark and one light. I am trying to store the theme in redux store and changing the classnames accordingly using classnames. Is it a valid approach or an anti-pattern?. What is the easiest way to manage theme in larger application?
reactjs react-redux class-names
reactjs react-redux class-names
asked Nov 22 '18 at 12:52
Unity HourUnity Hour
15410
asked Nov 22 '18 at 12:52
Unity HourUnity Hour
15410
asked Nov 22 '18 at 12:52
Unity HourUnity Hour
15410
asked Nov 22 '18 at 12:52
Unity HourUnity Hour
15410
asked Nov 22 '18 at 12:52
Unity HourUnity Hour
15410
15410
Arguably the easiest way would be to set a single class on thebodyelement (e.g.theme-light). Based on that, you can then change all your styles within CSS only. Your approach seems to be very repetitive as you would have to add that everywhere.
– str
Nov 22 '18 at 12:56
I would check out Styled Components. It has support for multiple themes
– weibenfalk
Nov 22 '18 at 13:04
add a comment |
Arguably the easiest way would be to set a single class on thebodyelement (e.g.theme-light). Based on that, you can then change all your styles within CSS only. Your approach seems to be very repetitive as you would have to add that everywhere.
– str
Nov 22 '18 at 12:56
I would check out Styled Components. It has support for multiple themes
– weibenfalk
Nov 22 '18 at 13:04
Arguably the easiest way would be to set a single class on the
body element (e.g. theme-light). Based on that, you can then change all your styles within CSS only. Your approach seems to be very repetitive as you would have to add that everywhere.– str
Nov 22 '18 at 12:56
Arguably the easiest way would be to set a single class on the
body element (e.g. theme-light). Based on that, you can then change all your styles within CSS only. Your approach seems to be very repetitive as you would have to add that everywhere.– str
Nov 22 '18 at 12:56
I would check out Styled Components. It has support for multiple themes
– weibenfalk
Nov 22 '18 at 13:04
I would check out Styled Components. It has support for multiple themes
– weibenfalk
Nov 22 '18 at 13:04
add a comment |
1 Answer
1
active
oldest
votes
0
- Have a state attribute with theme, and all corresponding data
- Set the theme of your components to
this.props.currentTheme
- When you change the theme, you're just changing the data in
currentThemeand all else will change too
answered Nov 22 '18 at 23:37
mewcmewc
157214
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
});
}
});
draft saved
draft discarded
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%2f53431479%2freact-is-it-good-way-to-use-classnames-for-managing-multiple-themes%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
- Have a state attribute with theme, and all corresponding data
- Set the theme of your components to
this.props.currentTheme
- When you change the theme, you're just changing the data in
currentThemeand all else will change too
answered Nov 22 '18 at 23:37
mewcmewc
157214
add a comment |
0
- Have a state attribute with theme, and all corresponding data
- Set the theme of your components to
this.props.currentTheme
- When you change the theme, you're just changing the data in
currentThemeand all else will change too
answered Nov 22 '18 at 23:37
mewcmewc
157214
add a comment |
0
0
0
- Have a state attribute with theme, and all corresponding data
- Set the theme of your components to
this.props.currentTheme
- When you change the theme, you're just changing the data in
currentThemeand all else will change too
answered Nov 22 '18 at 23:37
mewcmewc
157214
- Have a state attribute with theme, and all corresponding data
- Set the theme of your components to
this.props.currentTheme
- When you change the theme, you're just changing the data in
currentThemeand all else will change too
answered Nov 22 '18 at 23:37
mewcmewc
157214
answered Nov 22 '18 at 23:37
mewcmewc
157214
answered Nov 22 '18 at 23:37
mewcmewc
157214
answered Nov 22 '18 at 23:37
mewcmewc
157214
157214
add a comment |
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53431479%2freact-is-it-good-way-to-use-classnames-for-managing-multiple-themes%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
Arguably the easiest way would be to set a single class on the
bodyelement (e.g.theme-light). Based on that, you can then change all your styles within CSS only. Your approach seems to be very repetitive as you would have to add that everywhere.– str
Nov 22 '18 at 12:56
I would check out Styled Components. It has support for multiple themes
– weibenfalk
Nov 22 '18 at 13:04