@Kafkae

Как прокинуть пропсы в emotion (аналог стайлед компонентс)?

Как прокинуть пропсы в emotion (аналог стайлед компонентс). И чтобы было дефолтное значение если пропсов нет.

Ссылка на код - https://codesandbox.io/s/ly8vp183p9
  • Вопрос задан
  • 91 просмотр
Решения вопроса 1
0xD34F
@0xD34F Куратор тега React
Так же, как и в любой другой компонент. А примеры использования пропсов можете посмотреть в документации.

UPD. Глянул код - так у вас же часть работы уже сделана. Некоторые из компонентов уже принимает пропсы - Container, например, или Wrapper. Возьмём Wrapper - у него есть itemWidth и itemHeight. Ну и отлично:

<Wrapper itemHeight="300px">

Говорите, дефолтное значение надо? Ну так пусть вместо height: ${p => p.itemHeight}; будет height: ${p => p.itemHeight || '200px'};, например. Или можно переписать компонент так:

export const Wrapper = styled.article(({
  itemWidth,
  itemHeight = '200px',
}) => ({
  backgroundColor: '#efefef',
  margin: '5px',
  height: itemHeight,
  width: itemWidth,
}));
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы