CSS-IN-JS研究ノート
記事の出典：Lagouの大きなフロントエンドの高給トレーニングキャンプ
CSSコードをJSファイルに統合する
1.CSS-IN-JSがあるのはなぜですか
CSS-IN-JSは、WebプロジェクトのJSコードにCSSコードをバンドルするためのソリューションです。このソリューションは、動的関数、スコープ、移植性の欠如など、CSSの制限を解決することを目的としています。
2.CSS-IN-JSの概要
CSS-IN-JSソリューションの利点：
- CSSコードに独立したスコープを持たせ、CSSコードがコンポーネントの外部にリークするのを防ぎ、スタイルの競合を防ぎます。
- コンポーネントをよりポータブルにし、すぐに使用できるように実装し、疎結合アプリケーションを簡単に作成します。
- コンポーネントをより再利用可能にします。一度記述すればどこでも実行できます。同じアプリケーションでコンポーネントを再利用できるだけでなく、同じフレームワークで構築された他のアプリケーションでコンポーネントを再利用することもできます。
- スタイルに動的関数を持たせると、スタイルルールに複雑なロジックを適用できます。動的関数を必要とする複雑なUIを作成する場合は、理想的なソリューションです。
3.感情ライブラリ
3.1感情の紹介
Emotionは、JSを使用してCSSスタイルを作成するために設計されたライブラリです。
npm install @emotion/core @emotion/styled
3.2css属性のサポート
- JSXプラグマ
jsx構文をReact.createElementメソッドに変換する必要はなく、jsxメソッドに変換する必要があることをBabelに通知します。
/** @jsx jsx */
import {
jsx } from '@emotion/core'
- Babelプリセット
npm run eject
npm install @emotion/babel-preset-css-prop
package.jsonファイルでbabel属性を見つけて、次のコンテンツを追加します。
"presets": [
"react-app",
"@emotion/babel-preset-css-prop"
]