CSSを使用したReactのスタイリング
CSSでReactのスタイルを設定するには多くの方法があります。このチュートリアルでは、3つの一般的な方法を詳しく見ていきます。
- インライン スタイリング
- CSSスタイルシート
- CSSモジュール
インラインスタイリング
インラインスタイル属性を使用して要素をスタイルするには、値がJavaScriptのオブジェクトである必要があります。
例：
スタイル情報を含むオブジェクトを挿入します。
注：JSXではJavaScript式は中括弧の中に記述され、JavaScriptオブジェクトも中括弧を使用するため、上記の例のスタイリングは2組の中括弧{{}}の中に記述されます。
キャメルケースのプロパティ名
インライン CSSは JavaScriptオブジェクトで記述されるため、background-colorなどハイフンで区切られたプロパティは、キャメルケースの構文で記述する必要があります。
例：
background-colorの代わりにbackgroundColorを使用する。:
JavaScriptオブジェクト
スタイル情報を含むオブジェクトを作成し、それをstyle属性で参照することもできます。
例：
myStyleという名前のスタイル オブジェクトを作成します。:
CSSスタイルシート
別のファイルにCSS スタイルを記述できます。.cssファイル拡張子を付けて、アプリケーションにインポートします。
アプリCSS:
「App.css」という名前の新しいファイルを作成し、そこにいくつかのCSSコードを挿入します。注：正しいファイル拡張子を覚えておいてください。
アプリケーションにスタイルシートをインポートします。
index.js:
CSSモジュール
アプリケーションにスタイルを追加するもう 1 つの方法は、CSSモジュールを使用することです。
CSSモジュールは、個別のファイルに配置されたコンポーネントに便利です。
モジュール内のCSS は、それをインポートしたコンポーネントでのみ使用でき、名前の競合について心配する必要はありません。
.module.css拡張子を持つCSSモジュールを作成します。例:my-style.module.css
「my-style.module.css」という名前の新しいファイルを作成し、そこに CSS コードを挿入します。
my-style.module.css:
コンポーネントにスタイルシートをインポートします。
:::example {.techis-example}
### Car.js:
:::code {.language-jsx .techis-white .techis-code}
import styles from './my-style.module.css'; <br/> <br/>const Car = () => {<br/>  return <h1 className={styles.bigblue}>Hello Car!</h1>;<br/>}<br/> <br/>export default Car;
:::code
アプリケーションにコンポーネントをインポートします。
index.js:
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。