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

i'm using styled components new project, , want use theming features of library. i'm struggling figure out if there or best practice way of adding multiple style properties 1 object (i.e., create kind of inheritance). want is:

// in theme, define group of styles given component // e.g. fonts have font-family, weight, size, etc const theme = {   fonts: {     font-family: ...,     font-weight: ...,     font-size: ...,   } }  // in styled component, // define multi-line theme, along component specific styles // or override theme styles const header = styled.span`   ${props => props.theme.fonts};   text-decoration: underline;   ... `; 

right now, it's apparent me need pass theme property each style on component. there pattern can reduce of repeated code seen in above example?

what define theme styles in separate files, example

• mycomponent
  • index.js
  • styles.js //<-- custom styles component
• theme
  • spacing.js // <-- common styles components
  • colors.js
  • fonts.js

inside spacing.js have this:

const verticalpaddingsmall = {   paddingtop: 5,   paddingbottom: 5, };  const verticalpaddingmedium = {   paddingtop: 10,   paddingbottom: 10, };  export default function spacing(size, direction, ispadding) {   // logic return correct object based on params,   // screen size (tablets vs phones), etc...   return verticalpaddingsmall; } 

obviously, code automatically generated based on configurations define different screen sizes , on, end result similar that.

then in custom component import common styles, apply them styles , overwrite if needed it, on styles.js:

import spacing 'themes/spacing'; import fonts 'themes/fonts';  const verticalpaddingsmall = stylesheet.create({   main: {     ...spacing('small', 'vertical', true),   },   title: {     ...spacing('xsmall', 'horizontal', false),     ...fonts.title,     fontsize: 25, //<--- overwrite default values title   }, }); 

i overwrite styles on components, because common styles handle different styles tables , phones, kinda media queries on web.