reactjs - 如何在 React 项目中组织 Styled Components 文件

Question

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

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

score 1 · Accepted Answer

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

import './checkbox.scss'

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

这是一个简单的例子：

score 1 · Accepted Answer

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

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

const Styled = {
  Button
};

export default Styled;

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

2 回答 2