How to style multiple variations of a <button> with Styled Components - css

Question

I have a simple colored button in my app that needs to change color based on some UI state:
const StyledButton = styled.button`
& {
border: 0;
color: white;
cursor: pointer;
}
&:hover {
background-color: ${(props) => props.theme.hoverColor};
}
&.base {
background-color: ${(props) => props.theme.baseColor};
}
&.selected {
background-color: ${(props) => props.theme.selectedColor};
}
&&.danger:hover {
background-color: ${(props) => props.theme.dangerColor};
}
&.disabled {
background-color: ${(props) => props.theme.disabledColor};
}
`;
Previously I was using CSS Modules to make sure classes would not "leak" to other styles and I have obtained the styled component by essentially a 1-to-1 translation.
.Button {
border: 0;
color: white;
cursor: pointer;
}
.Button:hover {
background-color: var(--hover-color);
}
.Button.base {
background-color: var(--base-color);
}
.Button.selected {
background-color: var(--selected-color);
}
.Button.Button.danger:hover {
background-color: var(--danger-color);
}
.Button.disabled {
background-color: var(--disabled-color);
}
I like the theming support in Styled Components, but I dislike how now my "local" classes are no longer local to the component. I consider this a significant tradeoff.
Am I missing the correct way of implementing multiple variants of a component?

Answer 1

At the moment I have found two solutions:
The first is to calculate by hand the end result and avoid any classes
const StyledButton = styled.button`
& {
border: 0;
color: white;
cursor: pointer;
}
${(props) =>
props.isBase &&
css`
&,
&:hover {
background-color: ${(props) => props.theme.baseColor};
}
`}
${(props) =>
props.selectedColor &&
css`
&,
&:hover {
background-color: ${(props) => props.theme.selectedColor};
}
`}
${(props) =>
props.isDisabled &&
css`
&,
&:hover {
background-color: ${(props) => props.theme.disabledColor};
}
`}
${(props) =>
props.isDanger &&
css`
& {
background-color: ${(props) => props.theme.dangerColor};
}
&:hover {
background-color: ${(props) => props.theme.dangerColor};
}
`}
`;
which works but is quite ugly
and the other is to split the StyledButton into many components:
const StyledButton = styled.button`
& {
border: 0;
color: white;
cursor: pointer;
background-color: ${(props) => props.theme.baseColor};
}
`;
const StyledSelectedButton = styled(StyledButton)`
& {
background-color: ${(props) => props.theme.selectedColor};
}
`;
const StyledDisabledButton = styled(StyledButton)`
& {
background-color: ${(props) => props.theme.disabledColor};
}
`;
const StyledDangerButton = styled(StyledButton)`
& {
background-color: ${(props) => props.theme.baseColorColor};
}
&&:hover {
background-color: ${(props) => props.theme.dangerColor};
}
`;
Which is better but I am afraid of an eventual combinatorial explosion once more complex states are involved (a selected danger component) or more pseudoclasses are involved.
Moreover if the button in question had a state (e.g. a click counter) changing style would destroy the state.
I cannot think of a solution around this problem.