Themed styled components combine props and theme
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
Just for curiosity, I am using styled-components in my React application and in there I use the suggested theme to have all colors and sizes everywhere available.
Currently I am doing it like this:
export const TestComponent = styled.div`
color: ${({ theme }) => theme.white};
background-color: ${({ theme }) => theme.white};
border: 1px solid ${({ theme }) => theme.white};
display: ${({ check }) => check ? 'block' : 'none'};
`;
So I am using the theme from the ThemeProvider and also an additional check of the outside component.
My question is now, why can I not use it like this:
export const TestComponent = styled.div`${({ theme, check }) => (css`
color: ${theme.white};
background-color: ${theme.white};
border: 1px solid ${theme.white};
display: ${check ? 'block' : 'none'};
`)`;
Wouldn't it be more convenient and easier to use ? And if so, why aren't they not suggesting it like this? I am just afraid that it hast some huge disadvantage, which I cannot see right now.
css reactjs sass styled-components emotion
asked Jan 4 at 14:43
Lorenz WeißLorenz Weiß
996
add a comment |
Just for curiosity, I am using styled-components in my React application and in there I use the suggested theme to have all colors and sizes everywhere available.
Currently I am doing it like this:
export const TestComponent = styled.div`
color: ${({ theme }) => theme.white};
background-color: ${({ theme }) => theme.white};
border: 1px solid ${({ theme }) => theme.white};
display: ${({ check }) => check ? 'block' : 'none'};
`;
So I am using the theme from the ThemeProvider and also an additional check of the outside component.
My question is now, why can I not use it like this:
export const TestComponent = styled.div`${({ theme, check }) => (css`
color: ${theme.white};
background-color: ${theme.white};
border: 1px solid ${theme.white};
display: ${check ? 'block' : 'none'};
`)`;
Wouldn't it be more convenient and easier to use ? And if so, why aren't they not suggesting it like this? I am just afraid that it hast some huge disadvantage, which I cannot see right now.
css reactjs sass styled-components emotion
asked Jan 4 at 14:43
Lorenz WeißLorenz Weiß
996
add a comment |
Just for curiosity, I am using styled-components in my React application and in there I use the suggested theme to have all colors and sizes everywhere available.
Currently I am doing it like this:
export const TestComponent = styled.div`
color: ${({ theme }) => theme.white};
background-color: ${({ theme }) => theme.white};
border: 1px solid ${({ theme }) => theme.white};
display: ${({ check }) => check ? 'block' : 'none'};
`;
So I am using the theme from the ThemeProvider and also an additional check of the outside component.
My question is now, why can I not use it like this:
export const TestComponent = styled.div`${({ theme, check }) => (css`
color: ${theme.white};
background-color: ${theme.white};
border: 1px solid ${theme.white};
display: ${check ? 'block' : 'none'};
`)`;
Wouldn't it be more convenient and easier to use ? And if so, why aren't they not suggesting it like this? I am just afraid that it hast some huge disadvantage, which I cannot see right now.
css reactjs sass styled-components emotion
asked Jan 4 at 14:43
Lorenz WeißLorenz Weiß
996
Just for curiosity, I am using styled-components in my React application and in there I use the suggested theme to have all colors and sizes everywhere available.
Currently I am doing it like this:
export const TestComponent = styled.div`
color: ${({ theme }) => theme.white};
background-color: ${({ theme }) => theme.white};
border: 1px solid ${({ theme }) => theme.white};
display: ${({ check }) => check ? 'block' : 'none'};
`;
So I am using the theme from the ThemeProvider and also an additional check of the outside component.
My question is now, why can I not use it like this:
export const TestComponent = styled.div`${({ theme, check }) => (css`
color: ${theme.white};
background-color: ${theme.white};
border: 1px solid ${theme.white};
display: ${check ? 'block' : 'none'};
`)`;
Wouldn't it be more convenient and easier to use ? And if so, why aren't they not suggesting it like this? I am just afraid that it hast some huge disadvantage, which I cannot see right now.
css reactjs sass styled-components emotion
css reactjs sass styled-components emotion
asked Jan 4 at 14:43
Lorenz WeißLorenz Weiß
996
asked Jan 4 at 14:43
Lorenz WeißLorenz Weiß
996
asked Jan 4 at 14:43
Lorenz WeißLorenz Weiß
996
asked Jan 4 at 14:43
Lorenz WeißLorenz Weiß
996
asked Jan 4 at 14:43
Lorenz WeißLorenz Weiß
996
996
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
I don't believe there's anything wrong with either approach. I've used what you're doing in your first example a lot in a large React app, and had no issue (yet).
That being said, your second example is perfectly valid. You don't even need the css helper:
const Test = styled.div`
${({ theme }) => `color: ${theme.white};`}
`;
In general, I use the css helper to create abstracted/sharable css chunks:
const fontSize = css`
font-size: ${({ small, large, theme }) => {
if (small) return `${theme.small}rem`;
if (large) return `${theme.large}rem`;
return `${theme.normal}rem`;
}};
`;
const Test = styled.div`
${({ theme }) => `color: ${theme.white};`}
${fontSize}
`;
And then:
<Test small>Hello World</Test>
answered Jan 7 at 22:31
RicardinhoRicardinho
651611
Thecsshelper was more a helper for my IDE to recognize that these are styles and not just a string. But thanks! I will try it out and hope for no issues !
– Lorenz Weiß
Jan 8 at 7:44
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%2f54041112%2fthemed-styled-components-combine-props-and-theme%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
I don't believe there's anything wrong with either approach. I've used what you're doing in your first example a lot in a large React app, and had no issue (yet).
That being said, your second example is perfectly valid. You don't even need the css helper:
const Test = styled.div`
${({ theme }) => `color: ${theme.white};`}
`;
In general, I use the css helper to create abstracted/sharable css chunks:
const fontSize = css`
font-size: ${({ small, large, theme }) => {
if (small) return `${theme.small}rem`;
if (large) return `${theme.large}rem`;
return `${theme.normal}rem`;
}};
`;
const Test = styled.div`
${({ theme }) => `color: ${theme.white};`}
${fontSize}
`;
And then:
<Test small>Hello World</Test>
answered Jan 7 at 22:31
RicardinhoRicardinho
651611
Thecsshelper was more a helper for my IDE to recognize that these are styles and not just a string. But thanks! I will try it out and hope for no issues !
– Lorenz Weiß
Jan 8 at 7:44
add a comment |
I don't believe there's anything wrong with either approach. I've used what you're doing in your first example a lot in a large React app, and had no issue (yet).
That being said, your second example is perfectly valid. You don't even need the css helper:
const Test = styled.div`
${({ theme }) => `color: ${theme.white};`}
`;
In general, I use the css helper to create abstracted/sharable css chunks:
const fontSize = css`
font-size: ${({ small, large, theme }) => {
if (small) return `${theme.small}rem`;
if (large) return `${theme.large}rem`;
return `${theme.normal}rem`;
}};
`;
const Test = styled.div`
${({ theme }) => `color: ${theme.white};`}
${fontSize}
`;
And then:
<Test small>Hello World</Test>
answered Jan 7 at 22:31
RicardinhoRicardinho
651611
Thecsshelper was more a helper for my IDE to recognize that these are styles and not just a string. But thanks! I will try it out and hope for no issues !
– Lorenz Weiß
Jan 8 at 7:44
add a comment |
I don't believe there's anything wrong with either approach. I've used what you're doing in your first example a lot in a large React app, and had no issue (yet).
That being said, your second example is perfectly valid. You don't even need the css helper:
const Test = styled.div`
${({ theme }) => `color: ${theme.white};`}
`;
In general, I use the css helper to create abstracted/sharable css chunks:
const fontSize = css`
font-size: ${({ small, large, theme }) => {
if (small) return `${theme.small}rem`;
if (large) return `${theme.large}rem`;
return `${theme.normal}rem`;
}};
`;
const Test = styled.div`
${({ theme }) => `color: ${theme.white};`}
${fontSize}
`;
And then:
<Test small>Hello World</Test>
answered Jan 7 at 22:31
RicardinhoRicardinho
651611
I don't believe there's anything wrong with either approach. I've used what you're doing in your first example a lot in a large React app, and had no issue (yet).
That being said, your second example is perfectly valid. You don't even need the css helper:
const Test = styled.div`
${({ theme }) => `color: ${theme.white};`}
`;
In general, I use the css helper to create abstracted/sharable css chunks:
const fontSize = css`
font-size: ${({ small, large, theme }) => {
if (small) return `${theme.small}rem`;
if (large) return `${theme.large}rem`;
return `${theme.normal}rem`;
}};
`;
const Test = styled.div`
${({ theme }) => `color: ${theme.white};`}
${fontSize}
`;
And then:
<Test small>Hello World</Test>
answered Jan 7 at 22:31
RicardinhoRicardinho
651611
answered Jan 7 at 22:31
RicardinhoRicardinho
651611
answered Jan 7 at 22:31
RicardinhoRicardinho
651611
answered Jan 7 at 22:31
RicardinhoRicardinho
651611
651611
Thecsshelper was more a helper for my IDE to recognize that these are styles and not just a string. But thanks! I will try it out and hope for no issues !
– Lorenz Weiß
Jan 8 at 7:44
add a comment |
Thecsshelper was more a helper for my IDE to recognize that these are styles and not just a string. But thanks! I will try it out and hope for no issues !
– Lorenz Weiß
Jan 8 at 7:44
The
css helper was more a helper for my IDE to recognize that these are styles and not just a string. But thanks! I will try it out and hope for no issues !– Lorenz Weiß
Jan 8 at 7:44
The
css helper was more a helper for my IDE to recognize that these are styles and not just a string. But thanks! I will try it out and hope for no issues !– Lorenz Weiß
Jan 8 at 7:44
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%2f54041112%2fthemed-styled-components-combine-props-and-theme%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
