在哪里放置样式组件样式

Question

用于设置我的 React 应用程序样式的组件，到目前为止，我在每个页面的文件夹中都有一个名为 Styles 的单独文件夹，并将我设置样式的组件包装器存储在其中（例如 ThemeToggler.Style.js 或 Section.Style.js和...）。

但我意识到我的代码越来越乱，项目文件数量增加得如此之快，因为创建一个组件意味着创建 2 个文件，而且一些样式非常简单和小，所以我决定将它们写在组件的主文件中，因为它更具可读性。

但我还是觉得这种方法也不太好，因为有些样式太长，无法放在组件文件中，还有一些样式与组件本身无关，也许我有一个显示相邻样式的样式此 div 的导航（如果用户单击它）。我以为我会把它们放在一个名为 DivOnHover.js 的单独文件中，但它似乎不正确:)

我想听听您管理 styled-components 样式的方法，您如何将它们存储在文件夹结构中？

Answer 1

就我个人而言，我倾向于经常使用这种结构：

components/
| Button/
| | Button.js
| | Button.styles.js
| Navbar/
| | Navbar.js
| | Navbar.styles.js

以制作更多文件为代价，它允许您分离组件逻辑和样式。

Answer 2

我的文件夹结构是这样的

/app
  /pages ( React Router )
  /styles ( CSS only )
  /components ( Reusable Components )
  /styled ( Styled Components )
  /hooks ( React Hooks )
  index.js
  app.js
  routes.js ( React Router )

在哪里放置样式组件样式

Where to put styled components styles

css

reactjs

styled-components

directory-structure