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

..然后该应用仍然引用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）您创建文件夹标签

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拆分为多个文件，但将它们导出为一个文件

2 个答案: