51

アプリで styled-components を使用したいのですが、どのように整理すればよいか悩んでいます。

基本的にスタイル付きコンポーネントは、再利用のために特定のコンポーネントに割り当てられます。

しかし、他のコンポーネント (アニメーション コンポーネントなど) で何度も使用したい styled-components はどうですか? これらの「グローバル」スタイル コンポーネントを保持し、それを多くのコンポーネントにインポートするファイルを作成する必要がありますか?

それは良い習慣ですか？

4

3 に答える 3

20

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スタイル付きコンポーネントです。コンポーネントの外観のみを管理します。また、色、borderStyles などのテーマ関連ファイルもここにインポートする必要があります。
    • container.js状態管理を使用している場合は、コンポーネントをそのライブラリに接続するアーティファクトが必要です。この場合、Redux.
    • index.js関連するものは何でもエクスポートします。

このアプローチの利点は、別の CSSinJS ライブラリを使用することにした場合に、どこに変更を加える必要があるかが明確であることです。

他の誰かにとって意味があることを願っています。

乾杯！

于 2017-07-29T16:44:53.340 に答える