将 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' 将完美运行

Answer 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;
`;

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

Splitting Styled-Components into multiple files but export them as one file

javascript

reactjs

styled-components