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

Question

[Kafkae]

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

Ссылка на код - https://codesandbox.io/s/ly8vp183p9

Answer 1

[0xD34F]

Так же, как и в любой другой компонент. А примеры использования пропсов можете посмотреть в документации.

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,
}));

Comments

[Kafkae]

Привет! Я похоже не разобрался(. Если в Карусели задавать значения то все хорошо, а если index js то ничего не происходит(
https://codesandbox.io/s/ly8vp183p9

[Kafkae]

Спасибо что выручаешь)