One useful feature of Styled components is the compose utility, which allows for combining multiple Styled System functions within a single component. My goal is to merge the lineHeight and fontSize properties based on the default array.
Rather than coding it this way:
<Heading type="h1"
fontSize={[ 1, 2, 3 ]}
lineHeight={[1 , 2, 3 ]}
color={theme.colors.heading.tinted}
>
I aim to consolidate these into a single font property that includes both fontSize and lineHeight values.
<Heading type="h1"
font={[ 1, 2, 3 ]}
color={theme.colors.heading.tinted}
>
In Heading.jsx:
const Element = styled('div')(
space,
color,
compose(
fontSize,
lineHeight
)
);
Your theme.js file might look like this:
const theme = {
fontSizes: [11, 13, 16, 23, 29, 37, 47, 76, 97],
lineHeights: ['12px', '12px', '12px', '32px', '32px', '40px', '48px', '56px', '72px', '80px', '104px']
}