React-Emotion:在组件重用中向下传递defaultProps

Question

我有这个：

​

import styled from 'react-emotion';

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

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

​

当我使用Box组件时，它工作得很好。默认的道具如预期的那样在那里。

但是，当我使用styled重用Box时，默认的道具不会被传递：

​

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

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

​

当我使用UniqResponsiveBox时，它没有我为Box声明的defaultProps。下面的解决办法让我顺利通过，但似乎是多余的，我相信我错过了一些仅通过情感来完成这一点的东西。

​

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!

​

Answer 1

这个特殊的问题是情感内部的一个错误--它已经在11天前合并的a pull request中修复了，所以它应该会出现在下一个版本中。

同时，避免附加功能的另一种解决方法是：

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