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

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

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

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

.box { @include section(); }

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

https://www.styled-components.com/docs/basics#exnding-styles


styled-components
person Evanss    schedule 08.05.2018    source источник

Ответы (2)


arrow_upward
9
arrow_downward

Просто добавляю к ответу @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')}
`
person Jamie Kudla    schedule 12.12.2018

arrow_upward
4
arrow_downward

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

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


<ThemeProvider theme={theme}>
person Evanss    schedule 09.05.2018
comment
есть ли другой способ использовать существующее микширование? - person Goor Lavi; 24.10.2018
comment
Почему вы не включили переменную radius, переданную в исходный миксин? - person vsync; 06.11.2018
comment
@vsync Проверьте мой ответ на свой вопрос :) - person Jamie Kudla; 13.12.2018