A Quick Guide to Styled Components with Interactive Examples
Maciej Nowakowski
1.4K5

The Title definition couples the component with the theme. Same happens with everything that uses the themes.

/* First file */
export default {
fontSize: {
xl: "2.4rem",
lg: "1.8rem",
md: "1.3rem",
nm: "1rem",
sm: "0.75rem"
},
};
/* Second file */
const Title = styled.h1`
font-size: ${props => {
if (props.xl) return props.theme.fontSize.xl;
if (props.lg) return props.theme.fontSize.lg;
if (props.md) return props.theme.fontSize.md;
if (props.sm) return props.theme.fontSize.sm;
return props.theme.fontSize.nm;
}};
`
/* Third file */
const Subtitle = styled.h2`
font-size: ${props => {
if (props.xl) return props.theme.fontSize.xl;
if (props.lg) return props.theme.fontSize.lg;
if (props.md) return props.theme.fontSize.md;
if (props.sm) return props.theme.fontSize.sm;
return props.theme.fontSize.nm;
}};
`

For adding or removing font sizes from the theme you have to add/remove the corresponding options. Title and the theme will be in different files but both need to be changed when one changes and this for each component that uses the theme. Instead you could write it like this:

const Title = styled.h1`
font-size: ${props => props.theme.fontSize[props.font-size]};
`

This means you loose the ability to write:

<Title xl capitalize>...</Title>
<Subtitle lg primary thin>...</Subtitle>
<Text thin>...</Text>

Instead you would have to write:

<Title font-size="xl" capitalize>...</Title>
<Subtitle font-size="lg" color="primary" thin>...</Subtitle>
<Text thin>...</Text>

All of a sudden it doesn’t feel so good to use. Now you need other proptypes besides bool and you get this sort of mixed syntax. And this doesn’t even cure the rigidity of the code since your proptype definitions need to declare each of the options anyway.

I could go with classname and use CSS variables to get much the same theme idea all the while keeping the styling and the business logic separate.

The idea is cool but by reading this introduction it seems to induce a horrible developer experience. Am i misunderstanding something?