如何创建可直接复用的styled-components组件集合无需重复定义？

当然可以实现直接调用复用样式组件的需求！其实你当前的思路已经接近正确了，只是可能对styled-components的组件性质有些误解，或者遇到了小的使用问题。下面给你两种可行的方案：

方案1：直接导出独立的样式组件 #

这种方式更直观，每个复用组件都作为独立的导出项，使用时直接导入即可：

// reusableStyles.js
import styled from 'styled-components';

// 直接导出每个样式组件
export const BgGreen = styled.div`
  background-color: #50ccb7;
  color: #FFF;
`;

export const TextLeft = styled.div`
  text-align: left;
  width: 50%;
`;

使用时无需额外包装，直接引入并使用：

// Test.js
import React from 'react';
import { BgGreen } from './reusableStyles.js';

class Test extends React.Component {
  render() {
    return (
      <BgGreen> Test Text with green background </BgGreen>
    );
  }
}

export default Test;

方案2：保持对象集合的形式（直接使用） #

如果你偏好把所有复用组件放在一个对象里管理，那你的原代码其实已经满足需求——ReusableStyles对象里的每个属性本身就是合法的React组件，完全可以直接在JSX中调用，不需要再用styled()重新包装。

比如你的原导出代码不变，使用时直接这样写：

// Test.js
import React from 'react';
import ReusableStyles from './reusableStyles.js';

class Test extends React.Component {
  render() {
    return (
      <ReusableStyles.BgGreen> Test Text with green background </ReusableStyles.BgGreen>
    );
  }
}

export default Test;

你之前说这种方式无法生效，大概率是出现了小问题，比如：

• 导入路径错误（检查reusableStyles.js的相对路径是否正确）
• 组件导出/导入时的语法错误（比如是否默认导出了对象）
• 样式被其他CSS覆盖（可以打开浏览器元素面板，查看该元素的样式是否被应用）

为什么无需重新包装？ #

因为styled.div调用后返回的就是一个React组件，不管你把它赋值给变量还是对象的属性，它的组件性质都不会改变。只有当你需要基于已有组件扩展新样式时，才需要使用styled(ExistingComponent)的方式。

内容的提问来源于stack exchange，提问作者timo