React-Emotion: передать defaultProps в повторное использование компонента - PullRequest
Новая
       11

React-Emotion: передать defaultProps в повторное использование компонента

0 голосов
/ 07 мая 2018

У меня есть это: 

import styled from 'react-emotion';

const Box = styled('div')`
  display: flex;
  flex-direction: ${p => p.direction};
`;

Box.defaultProps = {
  direction: 'column'
};

Это прекрасно работает, когда я использую компонент Box. Реквизиты по умолчанию там, как и ожидалось.

Однако, когда я повторно использую Box со стилем, реквизиты по умолчанию не передаются: 

import styled from 'react-emotion';
import Box from './Box';

export const UniqResponsiveBox = styled(Box)`
  // some media queries and other new styles
`;

Когда я использую UniqResponsiveBox, он не имеет параметров по умолчанию, которые я объявил для Box. Следующий обходной путь помогает мне, но кажется излишним, и я считаю, что мне не хватает чего-то, что выполняет это только с помощью эмоций. 

import styled from 'react-emotion';

const BoxContainer = styled('div')`
  display: flex;
  flex-direction: ${p => p.direction};
`;

function Box(props) {
  return <BoxContainer {...props}/>
}

Box.defaultProps = {
  direction: 'column'
}

import styled from 'react-emotion';
import Box from './Box';

export const UniqResponsiveBox = styled(Box)`
  // some responsive queries and other uniq styles
`;

// In this scenario, the default props are there because I passed them explicitly. Helppp!

1 Ответ

0 голосов
/ 02 июня 2018

Эта конкретная проблема является ошибкой внутри Emotion - она ​​была исправлена ​​в запросе , который был объединен 11 дней назад, поэтому он должен появиться в следующем выпуске.

Между тем, еще один обходной путь, позволяющий избежать дополнительной функции: 

import styled from 'react-emotion';
import Box from './Box';

export const UniqResponsiveBox = styled(Box)`
  // some media queries and other new styles
`;

UniqResponsiveBox.defaultProps = Box.defaultProps
...