Question

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

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

Answer 1

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

import './checkbox.scss'

因此我们直接知道我们需要编辑哪些CSS，而不是在一个大型复杂的sass文件中搜索它，这样可以改善工作流程。

这是一个简单的例子：

Answer 2

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

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

const Styled = {
  Button
};

export default Styled;

这种方法将使您可以很好地分离组件的代码和元素的样式，同时仅进行一次导入，例如import Styled from "./ComponentName.styles"。