1

我应该如何在 React 项目中组织样式化组件?我的意思是例如 - 我有我想要添加样式的 Navbar 组件。我应该创建单独的文件 NavbarStyle 并将其导入到 Navbar,在 Navbar 组件中创建 NavbarStyle 还是其他?还是仅适用于按钮等通用组件?

对于这个按钮和其他按钮 - 我应该创建单独的文件,例如在 styledComponents 文件夹中还是一个包含所有这些按钮的文件并导入刚需要的元素?我知道这主要取决于我们的偏好,但我想听听一些最佳实践建议(看起来 StyledComponents 文档对在项目中管理它们只字未提)。

4

2 回答 2

1

React 如此受欢迎的原因是因为你可以使用自由和项目结构。项目结构有很多好的和坏的做法,这里是我的简单看法。在 out company 中,我们决定将每个组件都以自己的风格分开。因此,例如,每个按钮、复选框等都有自己的样式文件。我们将所有类直接导入到一个组件中:

import './checkbox.scss'

正因为如此,我们直接知道我们需要编辑什么 CSS,而不是在一个大而复杂的 sass 文件中搜索它,这改善了工作流程。

这是一个简单的例子:

在此处输入图像描述

于 2017-05-23T08:54:18.447 回答
1

我知道这个问题已经很老了,但我最近遇到了同样的问题。这篇文章对我帮助很大。基本上,它建议将组件样式移动到名为 like 的单独文件ComponentName.styles.ts中,定义样式,并使其可作为单个对象的一部分导出,例如:

const Button = styled.button`...`;

const Styled = {
  Button
};

export default Styled;

这种方法可以让你很好地分离组件的代码和它的元素样式,同时只进行一次导入,比如import Styled from "./ComponentName.styles".

于 2020-10-18T23:32:47.800 回答