Reuse a 'mixin' with Styled Components across different files?

You can create a string with multiple CSS rules and pass that to the ThemeProvider.

const theme = {
  sectionMixin:
    'background: white; border-radius: 5px; border: 1px solid blue;',
}


<ThemeProvider theme={theme}>

Just adding on to the answer by @Evanss

You can make the mixin a function (as in OP) by doing:

const theme = {
 sectionMixin: (radius) => `border-radius: ${radius};`
}

and then use it like:

const Button = styled.button`
 ${props => props.theme.sectionMixin('3px')}
`

or simply:

const Button = styled.button`
 ${({ theme }) => theme.sectionMixin('3px')}
`

Related