我想在我的应用程序中使用样式化组件，我想知道如何组织它。
为了可重用性，将基本样式组件分配给特定组件。
但是我想在其他组件（例如动画组件）中多次使用的样式组件呢？ 我是否应该创建一个文件来保存这些“全局”样式组件并将其导入到许多组件中？
这是好的做法吗？
【问题讨论】：
标签： css reactjs styled-components
这是我使用样式组件构建的大多数大型生产应用程序的样子：
src
├── App
│ ├── Header
│ │ ├── Logo.js
│ │ ├── Title.js
│ │ ├── Subtitle.js
│ │ └── index.js
│ └── Footer
│ ├── List.js
│ ├── ListItem.js
│ ├── Wrapper.js
│ └── index.js
├── shared
│ ├── Button.js
│ ├── Card.js
│ ├── InfiniteList.js
│ ├── EmojiPicker
│ └── Icons
└── index.js
App 文件夹包含构成更大应用程序的所有特定组件。 （你可能会在你的真实应用程序中通过路由来构建它）每个更大的组件都是一个文件夹，其中包含一个 index.js 文件和一组单独文件中的样式组件。
当我正在构建我的应用程序时，我注意到我需要一个更大的组件中的一个样式化的组件到另一个更大的组件中，我将它的文件拖到shared/ 文件夹，更新所有的导入，就是这样！随着时间的推移，shared/ 成为一个临时模式库，其中包含我想要/需要在整个应用程序中重用的所有组件。
另一种相当常见的方法是在组件文件夹中包含style.js 文件，其中包含该组件的所有样式组件。好处是您有更少的文件妨碍您，但缺点是更难注意到重复和将组件移动到共享文件夹中的工作量更大。
我个人经常使用第一个版本，但这可能只是个人喜好问题 - 两个都试一下，看看你更喜欢哪一个！
【讨论】：
<div> 包装器都有一个单独的文件，这将是一种矫枉过正。您对此有何建议？
您也可以尝试Atomic Design 来构建您的应用程序。这样，您将能够重用您的样式组件。根据原子设计方法，您可以将组件组织成原子、分子、有机体、页面和模板。
原子
原子是原生的 html 标签。例如，一个 Input 元素可以是一个 Atom
const Input = props => <input {...props} />
分子
原子组是一个分子。例如：
const Field = ({ label, ...inputProps }) => (
<Label>
{label}
<Input {...inputProps} />
</Label>
)
有机体
有机体是一组原子、分子和/或其他有机体。例如：
const Form = (props) => (
<form {...props}>
<Field label="Name" type="text" />
<Field label="Email" type="email" />
</form>
)
页面
页面是您主要放置生物的地方。例如：
const HomePage = () => (
<PageTemplate header={<Header />}>
<Form />
</PageTemplate>
)
模板
模板是用于页面的布局。例如：
const PageTemplate = ({ header, children }) => (
<main>
{header && <div>{header}</div>}
{children}
</main>
)
Github 示例
Github 上有一个 React 入门项目，它使用原子设计方法和样式组件集成。这是Link。
【讨论】：
我使用 styled-component 组织项目的方式如下：
src
├── Layout
│ ├── Header
│ │ ├── Logo.jsx
│ │ ├── styled.js
│ │ ├── container.js
│ │ └── index.js
│ └── LeftPanel
│ ├── LeftPanel.jsx
│ ├── styled.js
│ └── index.js
└── index.js
推理：
.jsx 代表一个展示组件。styled.js 是样式化的组件。只管理组件的外观。此外，任何主题相关的文件都应该在这里导入，例如颜色、边框样式等。container.js 如果我们使用任何状态管理，我们应该有一个将我们的组件与该库连接的工件。在本例中为 Redux。index.js 导出任何相关的内容。我看到这种方法的优点是，如果您决定使用另一个 CSSinJS 库，那么很清楚必须在哪里进行更改。
希望对其他人有意义。
干杯！
【讨论】：