代码之家 › 专栏 › 技术社区 › James

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

styled-components reactjs javascript

James · 技术社区 · 7 年前

当我构建应用程序时,我没有意识到我最终会得到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格式 文件?

1 回复 | 直到 7 年前

Anshul Sahni 7 年前

您可以创建一个文件夹styledcomponents,并在其中创建一个默认的导入文件index.js,从中可以方便地导出所有内容。

在同一个文件夹中为不同的组件创建不同的文件,如 StyledTabs.js 和 StyledTitle.js 那么index.js就是你能做的

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

这边是你的 import { StyledTab } from 'path/to/StyledComponents' 会完美无缺地工作

推荐文章

Omphile James · 如何将此CSS代码转换为样式化组件?

3 年前

Taylor Austin · 样式化JSX变量不工作

8 年前

visarts · 无法单元测试覆盖材质ui的样式化组件

8 年前

Roy Prins · 彩色标签的样式化组件

8 年前

Strahinja Ajvaz · 对象解构引发错误

8 年前

Jayce444 · React JSS hover函数值

8 年前

James · 使用已设置样式的组件设置材质UI抽屉组件的样式

8 年前

tony_k · 在样式化组件中共享样式的惯用方法?

8 年前

Elcoosp · 生成样式化组件关键帧的函数是否昂贵?

8 年前

JoeTidee · 如何为React动态创建DOM目标。使用样式化组件创建门户?

8 年前