[CS] Styled-Component Day-32

反応庫で一番人気があるのはStyled-Componentです.
Reactのコンポーネントベースの開発環境において造形用CSS性能を向上させるために設計されている.

Styled Componentの特徴

Automatic critical CSS
Styled-Componentは、画面でレンダリングされた構成部品を追跡し、これらの構成部品のスタイルを自動的に挿入します.したがって、コードを適切に割り当てることで、ユーザーがアプリケーションを使用するときに、画面に最小限のコードしか表示されないことを保証できます.

No class name bugs
Styled-Componentは独自のclassNameを作成します.これにより、入力の重複やエラーによるエラーを低減できます.

Easier deletion of CSS
CSSファイルのclassNameを見つけて、既存のコンポーネントが使用されなくなったり削除されたりしたコンポーネントに対応するスタイルプロパティを削除する必要があります.ただし、すべてのアトリビュートがエレメントに関連付けられているため、削除時にそのエレメントを使用しない場合は、スタイルアトリビュートも削除されます.

Simple dynamic styling
これは、classNameを手動で管理する必要がなく、Reactのpropsまたはグローバル属性に基づいて構成部品にスタイル属性を付与する単純で直感的です.

Painless maintenance
他のCSSファイルを検索するために継承スタイルから構成部品への属性を検索する必要がないため、コードが大きくなっても維持は難しくありません.

Automatic vendor prefixing
各構成部品に既存のCSSを使用するスタイル属性を定義するだけでいいです.その他はStyled-Componentが処理します.

Styled-コンポーネントのインストール

# with npm
$ npm install --save styled-components

# with yarn 
$ yarn add styled-components

チェックポイントの概要

Storybook?

StoryBookは、構成部品の再利用性を拡張するUI開発ツールです.

CS-In-JSのメリット

は、他の構成部品に影響を与えないので、作成、変更、削除は自由です.(CSS-In-JSは依存性を低下させることができる.)

CSSは特定の素子に依存するため、クラス名の重複などの副作用はない.△コラボレーションだけでなく、メンテナンスも容易です.

CS-In-JSは、必要な部分のスタイルラベルのみを生成してロードします.

CSS In-JSライブラリにはスタイルコンポーネント、魅力コンポーネント、アフロディティなどがあり、スタイルコンポーネントが人気です.

Styled-Component

スタイル属性を定義する場合は、CS 3構文を使用します.

スタイルのプロパティを持つ構成部品を定義する場合は、関数を渡し、関数でpropsを使用します.

継承スタイル属性を持つ構成部品をstyled()で包み、変更する属性を再定義するだけで既存の属性を展開して使用できます.

Styled-Componentsは、

の個別のクラス名を指定することなく、タグごとに独自の名前を作成します.

(その他)
Styled-Componentsを使用する場合.または()のいずれかしか使用できません.
ex)誤用法

const Username = styled.(div)`
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;
`;

userefの説明について

userRefは、DOM領域の特定の方法を使用する必要がある場合によく使用される.

ref属性を使用して、DOMセグメントおよびreactセグメントのアドレス値をユーザrefの戻り値に渡すことができる.