I have a navbar component that I have created using Styled Components. I would like to create some props that change the background-color and/or text color.
For instance: <Navbar dark>
should have the following CSS:
background: #454545;
color: #fafafa;
Whereas <Navbar light>
should be the opposite:
background: #fafafa;
color: #454545;
If, however, neither prop is used, then I want to have a default background and text color -- say (for demo purposes), something like this:
background: #eee;
color: #333;
Now, my question is how to set this up in Styled Components.
I can do the following:
background: ${props => props.dark ? #454545 : '#eee'}
background: ${props => props.dark ? #fafafa : '#eee'}
background: #eee;
And something similar for color.
But this is redundant and not very elegant. I would like some sort of if/else statement:
background: ${ props => {
if (props.dark) { #454545 }
elseif (props.light) { #fafafa }
else { #eee }
}
But I don't know how to set something like that up in Styled Components.
Any suggestions?
Thanks in advance.
This is the solution I ended up using:
export const Navbar = styled.nav`
width: 100%;
... // rest of the regular CSS code
${props => {
if (props.dark) {
return `
background: ${colors.dark};
color: ${colors.light};
`
} else if (props.light) {
return `
background: ${colors.light};
color: ${colors.dark};
`
} else {
return `
background: ${colors.light};
color: ${colors.dark};
`
}
}}
`
Keep the passed in prop
name the same. Then you can utilize a switch/case
statement. For example, passing in a color
prop and using it as a type
to be matched against a case
.
Working example:
For example:
<Button color="primary">Example</Button>
components/Button
import styled from "styled-components";
const handleColorType = color => {
switch (color) {
case "primary":
return "#03a9f3";
case "danger":
return "#f56342";
default:
return "#fff";
}
};
const Button = styled.button`
display: block;
cursor: pointer;
border: 0;
margin: 5px 0;
background: #000;
font-size: 20px;
color: ${({ color }) => handleColorType(color)};
&:focus {
outline: 0;
}
`;
export default Button;
If you have multiple attributes (like a color
and a background
pair), then utilizing the same concept as above, alter the handleColorType
to return a string
with attributes and invoke the handleColorType
function without a style property.
For example:
<MultiButton color="primary">Example</MultiButton>
components/MultiButton
import styled from "styled-components";
const handleColorType = color => {
switch (color) {
case "primary":
return "color: #03a9f3; background: #000;";
case "danger":
return "color: #fff; background: #f56342;";
default:
return "color: #000; background: #eee;";
}
};
const MultiButton = styled.button`
display: block;
margin: 5px 0;
cursor: pointer;
border: 0;
font-size: 20px;
${({ color }) => handleColorType(color)};
&:focus {
outline: 0;
}
`;
export default MultiButton;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With