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

IT技术 javascript reactjs styled-components
2021-05-06 23:28:16

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

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？

2个回答

您可以创建一个文件夹 StyledComponents 并在其中创建一个默认导入文件 index.js，您的所有导出都将从该文件中得到便利。

在同一个文件夹中为不同的组件创建不同的文件StyledTabs.js，StyledTitle.js然后你可以做的同一个文件夹的 index.js

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

这样你的import { StyledTab } from 'path/to/StyledComponents'工作将完美无缺

您可以按照以下步骤操作。

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;
`;
其它你可能感兴趣的问题
上一篇Firebase 身份验证：每次获取或设置 cookie 时都使用 getIdToken？ 下一篇移除锥体内部的支撑