Add multiple style properties to a single theme property with Styled Components - css

Question

I'm using styled components for a new project, and want to use the theming features of the library. I'm struggling to figure out if there is a good or best practice way of adding multiple style properties to one object (i.e., create a kind of inheritance). What is want is:
// in the theme, define a group of styles for a given component
// e.g. all fonts have a font-family, weight, size, etc
const theme = {
fonts: {
font-family: ...,
font-weight: ...,
font-size: ...,
}
}
// then in my styled component,
// define the multi-line theme, along with component specific styles
// or even override the theme styles
const Header = styled.span`
${props => props.theme.fonts};
text-decoration: underline;
...
`;
Right now, it's only apparent to me that you would need to pass the theme property to each style on the component. Is there a pattern that can help reduce some of the repeated code seen in my above example?

Answer 1

What I usually do is to define the theme styles in a separate files, for example
MyComponent
index.js
styles.js //<-- Custom styles for component
theme
spacing.js // <-- Common styles for all components
colors.js
fonts.js
Inside spacing.js I would have something like this:
const verticalPaddingSmall = {
paddingTop: 5,
paddingBottom: 5,
};
const verticalPaddingMedium = {
paddingTop: 10,
paddingBottom: 10,
};
export default function spacing(size, direction, isPadding) {
// some logic to return the correct object based on the params,
// screen size (tablets vs phones), etc...
return verticalPaddingSmall;
}
Obviously, that code is automatically generated based on some configurations I define for different screen sizes and so on, but the end result is something similar to that.
Then in my custom component I import the common styles, apply them to the styles and overwrite if needed it, something like this on styles.js:
import spacing from 'themes/spacing';
import fonts from 'themes/fonts';
const verticalPaddingSmall = StyleSheet.create({
main: {
...spacing('small', 'vertical', true),
},
title: {
...spacing('xsmall', 'horizontal', false),
...fonts.title,
fontSize: 25, //<--- overwrite default values from title
},
});
I rarely overwrite styles on components, because my common styles handle different styles for tables and phones, kinda like media queries on the web.