ReactのCSS

CSSを使用してReactアプリケーションのスタイルを設定する方法

Reactを使用すると、コンポーネントにスタイルを追加するさまざまな方法があります。

クラスとCSSの使用

最初で最も簡単なのは、クラスを使用し、通常のCSSファイルを使用してそれらのクラスをターゲットにすることです。

const Button = () => {
  return <button className="button">A button</button>
}
.button {
  background-color: yellow;
}

次のように、importステートメントを使用してスタイルシートをインポートできます。

import './style.css'

そしてWebpackCSSプロパティをバンドルに追加します。

スタイル属性の使用

2番目の方法は、styleJSX要素に関連付けられた属性。このアプローチを使用すると、個別のCSSファイルは必要ありません。

const Button = () => {
  return <button style={{ backgroundColor: 'yellow' }}>A button</button>
}

CSSは現在少し異なる方法で定義されています。まず、二重中括弧に注意してください。これは、styleオブジェクトを受け入れます。中括弧で定義されたJavaScriptオブジェクトを渡します。これを行うこともできます:

const buttonStyle = { backgroundColor: 'yellow' }
const Button = () => {
  return <button style={buttonStyle}>A button</button>
}

使用する場合create-react-app、これらのスタイルは、の使用により、デフォルトで自動プレフィックスされます。自動プレフィックス

また、スタイルはダッシュを使用する代わりにキャメルケースになりました。 CSSプロパティにダッシュがあるたびに、それを削除して、大文字で始まる次の単語を開始します。

スタイルには、コンポーネントに対してローカルであるという利点があり、アプリの他の部分の他のコンポーネントにリークすることはありません。これは、クラスと外部CSSファイルを使用して提供できないものです。

CSSモジュールの使用

CSSモジュール真ん中の完璧な場所のようです。クラスを使用しますが、CSSはコンポーネントにスコープされます。つまり、追加したスタイルを許可なく他のコンポーネントに適用することはできません。それでも、スタイルは別のCSSファイルで定義されており、JavaScriptのCSSよりも保守が簡単です(古き良きCSSプロパティ名を使用できます)。

で終わるCSSファイルを作成することから始めます.module.css、 例えばButton.module.css。スタイリングするコンポーネントと同じ名前を付けるのが最適です。

ここにCSSを追加し、スタイルを設定するコンポーネントファイル内にインポートします。

import style from './Button.module.css'

これで、JSXで使用できます。

const Button = () => {
  return <button className={style.content}>A button</button>
}

それでおしまい!結果のマークアップで、Reactはレンダリングされたコンポーネントごとに特定の一意のクラスを生成し、CSSをそのクラスに割り当てて、CSSが他のマークアップに影響を与えないようにします。

CSS Modules in React

私の無料ダウンロードReactハンドブック


その他の反応チュートリアル: