CSSを使用してReactアプリケーションのスタイルを設定する方法
Reactを使用すると、コンポーネントにスタイルを追加するさまざまな方法があります。
クラスとCSSの使用
最初で最も簡単なのは、クラスを使用し、通常のCSSファイルを使用してそれらのクラスをターゲットにすることです。
const Button = () => {
return <button className="button">A button</button>
}
.button {
background-color: yellow;
}
次のように、importステートメントを使用してスタイルシートをインポートできます。
import './style.css'
そしてWebpackCSSプロパティをバンドルに追加します。
スタイル属性の使用
2番目の方法は、style
JSX要素に関連付けられた属性。このアプローチを使用すると、個別の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が他のマークアップに影響を与えないようにします。
私の無料ダウンロードReactハンドブック
その他の反応チュートリアル:
- Reactの簡単なアプリの例:APIを介してGitHubユーザー情報を取得する
- Reactでシンプルなカウンターを構築する
- React開発用のVSCodeセットアップ
- Reactルーターを介して小道具を子コンポーネントに渡す方法
- ElectronとReactでアプリを作成する
- チュートリアル:Reactを使用してスプレッドシートを作成する
- Reactを学ぶためのロードマップ
- Reduxの使い方を学ぶ
- JSXの使用を開始する
- スタイル付きコンポーネント
- ReduxSagaの紹介
- Reactルーターの紹介
- Reactの紹介
- コンポーネントを反応させる
- 仮想DOM
- Reactイベント
- 反応状態
- 小道具に反応する
- Reactフラグメント
- React Context API
- PropTypesに反応する
- Reactの概念:宣言型
- React:クリック時に別のコンポーネントを表示する方法
- ReactJSX内でループする方法
- 小道具とReactの状態
- jQueryまたはReactを使用する必要がありますか?
- Reactを使用するために知っておく必要のあるJavaScriptの量はどれくらいですか?
- ギャツビー入門
- ReactでDOM要素を参照する方法
- Reactにおける一方向のデータフロー
- 高次コンポーネントに反応する
- Reactライフサイクルイベント
- Reactのコンセプト:不変性
- Reactのコンセプト:純度
- Reactフックの紹介
- create-react-appの紹介
- Reactのコンセプト:構成
- React:プレゼンテーションコンポーネントとコンテナコンポーネント
- Reactでのコード分割
- Reactを使用したサーバー側のレンダリング
- Reactのインストール方法
- ReactのCSS
- ReactでのSASSの使用
- Reactでのフォームの処理
- React StrictMode
- Reactポータル
- Reactレンダリングプロップ
- Reactコンポーネントのテスト
- Reactのイベントハンドラーにパラメーターを渡す方法
- Reactでエラーを処理する方法
- JSXで複数の要素を返す方法
- Reactでの条件付きレンダリング
- React、小道具を子コンポーネントに転送する方法
- Reactで入力要素の値を取得する方法
- useStateReactフックの使用方法
- useCallbackReactフックの使用方法
- useEffectReactフックの使用方法
- useMemoReactフックの使用方法
- useRefReactフックの使用方法
- useContextReactフックの使用方法
- useReducerReactフックの使用方法
- Reactアプリを同じオリジンのバックエンドに接続する方法
- リーチルーターチュートリアル
- React開発ツールの使用方法
- Reactを学ぶ方法
- Reactアプリケーションをデバッグする方法
- ReactでHTMLをレンダリングする方法
- `dangerouslySetInnerHTML`を修正する方法がReactのエラーと一致しませんでした
- Reactログインフォームの状態とブラウザの自動入力に関する問題を修正する方法
- ローカルホスト上のReactアプリでHTTPSを構成する方法
- Reactの「別のコンポーネントのレンダリング中にコンポーネントを更新できない」エラーを修正する方法
- 条件内でReactフックを使用できますか?
- オブジェクトでのuseStateの使用:更新方法
- ReactとTailwindを使用してコードのブロックを移動する方法
- React、DOMに追加されたときにReactでアイテムにフォーカスします
- 反応、ダブルクリックでテキストを編集