将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";

我希望您可以将StyledComponents.js文件分割成多个文件，例如按UI逻辑（头部，尾部，容器等）进行划分，但不知道如何将它们重新导入到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";

那么应用程序是否仍然引用来自StyledComponents.js文件的StyledTabs或其他任何样式组件呢？

- James

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'将能够完美地工作。

- Anshul Sahni

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

- amaltapalov