I'm using Styled Components in react, and I want to wrap all the styles I want for only one prop (it's a conditional prop). Right now I have something like this:
<ContentSty
flexDirection={abilityScores ? "column" : "row"}
flexWrap={abilityScores ? "no-wrap" : "wrap"}
cardDisplay={abilityScores ? "flex" : "block"}
cardHeight={abilityScores ? "auto" : "5rem"}
cardTextMargin={abilityScores ? "auto 0.5rem" : "0.2rem 0"}
hoverShadow={abilityScores ? "none" : "0px 0px 14px gold"}
hoverCursor={abilityScores ? "auto" : "pointer"}
>
I always do the same check: if the variable abilityScores === true
then have this value, else have this other one. Then, in my styles, I have a lot of some-css-prop: ${(props) => props.someProp};
and it gets kind of messy
Is there a way to just wrap all the styles for abilityScores === true
in one prop, then just pass a unique prop like abilityScore={abilityScore === true ? allTheseStylings : ''}
, or a cleaner way, instead of just making a lot of props?
See the documentation on StyleObjects
here: https://styled-components.com/docs/advanced#style-objects
You can use the props
of abilityScore
to conditionally style your component.
For example:
const ContentSty = styled.div(props => ({
flexDirection: props.abilityScores ? "column" : "row",
flexWrap: props.abilityScores ? "no-wrap" : "wrap",
cardDisplay: props.abilityScores ? "flex" : "block",
cardHeight: props.abilityScores ? "auto" : "5rem",
cardTextMargin: props.abilityScores ? "auto 0.5rem" : "0.2rem 0",
hoverShadow: props.abilityScores ? "none" : "0px 0px 14px gold",
hoverCursor: props.abilityScores ? "auto" : "pointer",
});
...
<ContentSty abilityScores={true} />