Question

我有这个：

＆＃13;

import styled from 'react-emotion';

const Box = styled('div')`
  display: flex;
  flex-direction: ${p => p.direction};
`;

Box.defaultProps = {
  direction: 'column'
};

＆＃13;

当我使用Box组件时，这很好用。默认道具符合预期。

然而，当我重复使用带有样式的Box时，默认道具不会传递下来：

＆＃13;

import styled from 'react-emotion';
import Box from './Box';

export const UniqResponsiveBox = styled(Box)`
  // some media queries and other new styles
`;

＆＃13;

当我使用UniqResponsiveBox时，它没有我为Box声明的defaultProps。以下解决方法让我通过，但似乎多余，我相信我错过了一些只能用情感来实现这一点。

＆＃13;

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'
}

＆＃13;

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!

＆＃13;

Answer 1

此特定问题是Emotion中的一个错误 - 它已在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

React-Emotion：将defaultProp传递给组件重用

1 个答案: