CSSを使用したReactのスタイリング
Resact with CSSのスタイルを設定する方法はたくさんあります。このチュートリアルでは、次の3つの一般的な方法を詳しく見ていきます。
- インラインスタイリング
- CSSスタイルシート
- CSSモジュール
インラインスタイリング
インラインスタイル属性を使用して要素のスタイルを設定するには、値がJavaScriptオブジェクトである必要があります。
例：
スタイリング情報を含むオブジェクトを挿入します。
const Header = () => {
return (
<>
<h1 style={{color: "red"}}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
注： JSXでは、JavaScript式は中括弧内に記述されます。JavaScriptオブジェクトも中括弧を使用するため、上記の例のスタイルは2セットの中括弧内に記述されます{{}}。
キャメルケースのプロパティ名
インラインCSSはJavaScriptオブジェクトで記述されているため、のようなハイフン区切り文字を含むプロパティは、background-colorキャメルケース構文で記述する必要があります。
例：
backgroundColorの代わりに
使用background-color：
const Header = () => {
return (
<>
<h1 style={{backgroundColor: "lightblue"}}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
JavaScriptオブジェクト
スタイリング情報を使用してオブジェクトを作成し、それをstyle属性で参照することもできます。
例：
次の名前のスタイルオブジェクトを作成しますmyStyle。
const Header = () => {
const myStyle = {
color: "white",
backgroundColor: "DodgerBlue",
padding: "10px",
fontFamily: "Sans-Serif"
};
return (
<>
<h1 style={myStyle}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
CSSスタイルシート
CSSスタイルを別のファイルに記述し、
.cssファイル拡張子を付けてファイルを保存し、アプリケーションにインポートすることができます。
App.css：
「App.css」という名前の新しいファイルを作成し、その中にCSSコードを挿入します。
body {
background-color: #282c34;
color: white;
padding: 40px;
font-family: Sans-Serif;
text-align: center;
}
注：ファイルは好きなように呼び出すことができます。正しいファイル拡張子を覚えておいてください。
アプリケーションにスタイルシートをインポートします。
index.js：
import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';
const Header = () => {
return (
<>
<h1>Hello Style!</h1>
<p>Add a little style!.</p>
</>
);
}
ReactDOM.render(<Header />, document.getElementById('root'));
CSSモジュール
アプリケーションにスタイルを追加するもう1つの方法は、CSSモジュールを使用することです。
CSSモジュールは、別々のファイルに配置されるコンポーネントに便利です。
モジュール内のCSSは、それをインポートしたコンポーネントでのみ使用可能であり、名前の競合について心配する必要はありません。
.module.css
拡張子を付けてCSSモジュールを作成します。例： my-style.module.css。
「my-style.module.css」という名前の新しいファイルを作成し、その中にCSSコードを挿入します。
my-style.module.css：
.bigblue {
color: DodgerBlue;
padding: 40px;
font-family: Sans-Serif;
text-align: center;
}
コンポーネントにスタイルシートをインポートします。
Car.js：
import styles from './my-style.module.css';
const Car = () => {
return <h1 className={styles.bigblue}>Hello Car!</h1>;
}
export default Car;
アプリケーションにコンポーネントをインポートします。
index.js：
import ReactDOM from 'react-dom';
import Car from './Car.js';
ReactDOM.render(<Car />, document.getElementById('root'));