Повторно использовать «mixin» со стилизованными компонентами в разных файлах?

Question

Как можно повторно использовать коллекцию стилей со стилизованными компонентами в разных файлах?

С помощью SASS я могу определить и использовать миксин так:

@mixin section( $radius:4px ) {
  border-radius: $radius;
  background: white;
}

.box { @include section(); }

С помощью Styled Components вы можете расширить стиль, но это означает, что мне нужно будет импортировать этот компонент на каждую страницу. Это довольно громоздко по сравнению с тем, как переменные доступны везде с ThemeProvider.

https://www.styled -components.com / Docs / Основы # простирающиеся-стили

Answer 1

Просто добавив к ответу @ Evanss

Вы можете сделать миксин функцией (как в OP), выполнив:

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

, а затем используйте его как:

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

или просто:

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

Answer 2

Вы можете создать строку с несколькими правилами CSS и передать ее ThemeProvider.

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


<ThemeProvider theme={theme}>