React-Emotion : transmettre defaultProps à la réutilisation des composants

Question

J'ai ça :

import styled from 'react-emotion';

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

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

Cela fonctionne très bien lorsque j'utilise le composant Box. Les props par défaut sont présents comme prévu.

Cependant, lorsque je réutilise Box avec styled, les accessoires par défaut ne sont pas transmis :

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

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

Lorsque j'utilise UniqResponsiveBox, elle ne possède pas les defaultProps que j'ai déclarés pour Box. La solution suivante me permet d'y arriver, mais elle me semble redondante et je crois qu'il me manque quelque chose qui me permettrait d'y arriver en utilisant uniquement l'émotion.

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

Ce problème particulier est un bug dans Emotion - il a été corrigé dans une demande de téléchargement qui a été fusionné il y a 11 jours, il devrait donc apparaître dans la prochaine version.

En attendant, une autre solution de contournement pour éviter la fonction supplémentaire serait simplement :

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