React-Emotion组件复用：defaultProps无法向下传递的问题

This is a common gotcha when working with styled components in Emotion—when you extend a styled component with styled(ExistingComponent), the new component doesn't automatically inherit the original component's defaultProps. Let's break down why this happens and how to fix it.

Your Original Code #

First, let's recap the components you're working with:

Box.js (Base Component)

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

UniqResponsiveBox.js (Extended Component)

import styled from 'react-emotion';
import Box from './Box';
export const UniqResponsiveBox = styled(Box)`
  // Media queries and additional styles...
  @media (min-width: 768px) {
    flex-direction: row;
  }
`;

Why defaultProps Isn't Passed Down #

When you use styled(Box), Emotion creates a brand new StyledComponent wrapper. This new component only inherits the style logic of the original Box—it doesn't carry over React-specific component properties like defaultProps automatically. The original Box's defaultProps are tied to that specific component instance, not the styled template logic.

Solutions #

1. Manually Copy defaultProps to the New Component

The simplest fix is to explicitly copy the original component's defaultProps to your extended component:

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

export const UniqResponsiveBox = styled(Box)`
  // Your media queries and styles...
`;

// Inherit defaultProps from the base Box
UniqResponsiveBox.defaultProps = { ...Box.defaultProps };

This ensures the new component uses the same default values as the original Box.

2. Inline Default Values in the Styled Template

Instead of relying on defaultProps, set your default values directly in the styled template's prop function. This makes the defaults part of the style logic, which will be inherited by any extended components:

// Box.js (updated)
import styled from 'react-emotion';
const Box = styled('div')`
  display: flex;
  // Set default value directly in the prop destructuring
  flex-direction: ${({ direction = 'column' }) => direction};
`;
// No need for Box.defaultProps anymore!

Now when you extend Box with styled(Box), the direction default of 'column' will work automatically, since it's baked into the style function that gets reused.

3. Use a Custom Component Wrapper (For More Control)

If you want to ensure default props are always inherited, you can wrap your styled component in a regular React component that handles the defaults:

// Box.js (wrapper approach)
import styled from 'react-emotion';

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

const Box = ({ direction = 'column', ...props }) => {
  return <StyledBox direction={direction} {...props} />;
};

export default Box;

This way, any component that uses or extends Box will always get the default direction value, since it's handled at the component level rather than the styled component level.

内容的提问来源于stack exchange，提问作者Julio Gudiño