✏️Achievement Goals

構造的にCSSを記述する方法の発展と原因を理解する.
Styled-Componentライブラリを使用すると、コンポーネントベースのCSSを作成できます.
UseRef HookはDOM Referenceを利用できます.

📝summary

なぜ構造化CSSが必要ですか?

プロジェクトの規模の拡大、複雑さの向上、一緒に仕事をするチームの数の増加に伴い、
モバイル機器やタブレットなど多様な機器が登場するため、サイトは様々な表示をカバーする必要がある.
したがって、CSSのコンシステントモードを作成することがCSSの効率化の鍵となります.
これらの問題を解決するために、SASS、BEM等が存在する

開発がアプリケーションの方向に進むにつれて、コンポーネント単位の開発はパッケージ(パッケージ:オブジェクトの属性と動作を組み合わせて、実際に実施された一部を外部に隠す概念)をますます重視している.
CSSを構成部品領域に導入するために、CS-In-JSが誕生しました.
CSS-IN-JSの代表的なStyled-Component

Styled-Component

Styled ComponentはReactのコンポーネントベースの開発環境でCSSのモデリング性能を向上させるために作成された.
Styled Componentを使用すると、既存のCSS構文を使用してスタイル属性を追加するReactコンポーネントを作成できます.
たとえば、アプリケーション内で他のWebページに移動する機能を持つButtonを作成する場合は、次のコードを作成できます.

const Button = styled.a`
  display: inline-block;
  border-radius: 3px;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;
  width: 11rem;
`;

スタイル→コンポーネントの使用

がJavaScriptで変数を宣言したように(またはreactで構成部品を作成)、Buttonを作成し、

を作成します.

tagの属性(ここではa tag)

を定義する

backtic(`)では、既存のCSS構文を使用してスタイル属性を定義すると

になります.

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

npm install --save styled-components

推奨
次のコードを追加すると、複数バージョンのStyled Componentのインストール時に発生する問題を減らすことができますのでpackageです.jsonに次のコードを追加することを推奨します.

{
  "resolutions": {
    "styled-components": "^5"
  }
}