在哪里放置样式化的组件样式[关闭]答案

【问题标题】：Where to put styled components styles [closed]在哪里放置样式化的组件样式[关闭]
【发布时间】：2022-02-08 22:06:19
【问题描述】：

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

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

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

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

【问题讨论】：

标签： css reactjs styled-components directory-structure

【解决方案1】：

我的文件夹结构是这样的

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

【讨论】：

我仍然不确定页面文件夹的使用情况，我应该将页面特定组件放入其中吗？喜欢与主页相关的组件？或者它与 react-router 相关？另外，将所有样式化的组件包装器放在一个文件夹中并且不将其分隔到特定于页面的组件中是否很好？
@TimeRunner2359 文件夹结构可能因每个开发人员而异。所以尝试自己制作，然后探索一些很酷的 React 网站的公共 Github 存储库并学习它们。

【解决方案2】：

我个人倾向于经常使用这种结构：

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

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

【讨论】：