将 Styled-Components 拆分为多个文件，但将它们导出为一个文件答案

【问题标题】：Splitting Styled-Components into multiple files but export them as one file将 Styled-Components 拆分为多个文件，但将它们导出为一个文件
【发布时间】：2018-11-18 03:54:36
【问题描述】：

当我构建我的应用程序时，我没有意识到我最终会得到一百多个样式组件。因此，我将它们放在同一个文件中，如下所示：

export const StyledTabs = styled(Tabs)`
  display: inline-flex !important;
  margin-left: 15% !important;
`;

export const StyledTab = styled(Tab)`
  display: inline-flex !important;
  margin-left: 0% !important;
  padding: 0 !important;
`;

...应用程序像这样导入它们：

import { StyledTabs, StyledTitle } from "StyledComponents";

我想通过例如 UI 逻辑（页眉、页脚、容器等）将 StyledComponents.js 文件拆分为多个文件，但不知何故，将它们导入回 StyledComponents.js，所以我不必重构整个应用程序。

这样的事情可能吗：

HeaderSC.js

export const StyledTabs = styled(Tabs)`
  display: inline-flex !important;
  margin-left: 15% !important;
`;

export const StyledTab = styled(Tab)`
  display: inline-flex !important;
  margin-left: 0% !important;
  padding: 0 !important;
`;

StyledComponents.js

import { StyledTabs, StyledTitle } from "../styling/HeaderSC";

..然后应用仍然引用StyledTabs 或StyledComponents.js 文件中的任何其他样式组件？

【问题讨论】：

标签： javascript reactjs styled-components

【解决方案1】：

您可以创建一个文件夹 StyledComponents，并在其中创建一个默认的导入文件 index.js，您的所有导出都将从该文件中得到促进。

在同一个文件夹中为不同的组件创建不同的文件，例如 StyledTabs.js 和 StyledTitle.js 然后你可以在同一个文件夹中创建 index.js

export StyledTab from './StyledTab';
export StyleTitle from './StyledTitle';

这样您的import { StyledTab } from 'path/to/StyledComponents' 将完美运行

【讨论】：

【解决方案2】：

您可以按照以下步骤进行操作。

1) 你创建文件夹Tabs

2) 在 Tabs 文件夹中创建 index.js 和 styled.js 文件。

在 index.js 文件中：

import {StyledTabs, StyledTitle } from "./styled

在 styled.js 文件中：

export const StyledTabs = styled(Tabs)`
  display: inline-flex !important;
  margin-left: 15% !important;
`;

export const StyledTab = styled(Tab)`
  display: inline-flex !important;
  margin-left: 0% !important;
  padding: 0 !important;
`;

【讨论】：