将样式化组件拆分为多个文件，但将它们导出为一个文件 [英] Splitting Styled-Components into multiple files but export them as one file

问题描述

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

When I was building my application, I didn't realize that I am going to end up with more than a hundred styled components. Consequently, I was putting them in the same file like this:

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

...应用程序将其导入如下:

... And the application imports them like this:

import { StyledTabs, StyledTitle } from "StyledComponents";

我想通过UI逻辑(页眉，页脚，容器等)将 StyledComponents.js 文件拆分为多个文件，但是不知何故，将它们重新导入到StyledComponents.js ，因此我不必重构整个应用程序.

I want to split the StyledComponents.js file into multiple files by, for example, UI logic (header, footer, containers, etc..) but somehow, import them back into StyledComponents.js so I don't have to refactor the entire application.

是否可能这样:

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

..and then the app still referring to StyledTabs or any other styled component from StyledComponents.js file?

推荐答案

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

You can create a folder StyledComponents and inside that create a default import file index.js, from which all your exports will be facilitated.

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

In the very same folder create different files for different components like StyledTabs.js and StyledTitle.js then index.js of the very same folder you can do

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

这样，您的从'path/to/StyledComponents'导入{StyledTab} 即可正常工作

This way your import { StyledTab } from 'path/to/StyledComponents' will work flawlessly

这篇关于将样式化组件拆分为多个文件，但将它们导出为一个文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！