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

Question

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

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 文件中的任何其他样式组件？

Answer 1

您可以创建一个 StyledComponents 文件夹，并在其中创建一个默认导入文件 index.js，从中可以方便您的所有导出。

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

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

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