将样式化组件拆分为多个文件,但将它们导出为一个文件

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

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格式 所以我不必重构整个应用程序。

可能是这样的吗:

标题文件

export const styled tabs=已设置样式(选项卡)`
显示:内联伸缩!重要的;
左边距:15%!重要的;
;

export const styled tab=已设置样式(tab)`
显示:内联伸缩!重要的;
左边距:0%!重要的;
填料:0!重要的;
;

styledcomponents.js格式

import { StyledTabs, StyledTitle } from "../styling/HeaderSC";

…然后应用程序仍然引用 StyledTabs 或任何其他样式的组件 styledcomponents.js格式 文件?