React（+TypeScript）入門 | スタイルを適用する

create-react-appを用いて生成したReactプロジェクトにおいて、コンポーネントにCSSを適用する方法を紹介します。

インライン

通常のHTML要素がインラインでスタイルを適用できるとの同じ要領で、ReactコンポーネントもJSXの中にインラインでスタイルを記述することができます。

import * as React from 'react';

const MyButton = (props) => {
    return (
        <button type="submit" style={{backgroundColor: '#FF8A80', padding: '20px'}}>BUTTON</button>
    );
};

export default MyButton;

JSXの中でstyleに適用したいスタイルをJSオブジェクトで指定します。注意点としてCSSプロパティがキャメルケースとなります。background-colorのような記法ではないので気をつけてください。

className

create-react-appは内部でモジュールバンドラとしてWebpackを使っています。Webpackの特徴はCSSや画像などのアセットを全てJavaScriptとして扱うところです。よってJS(TS)コードからCSSをモジュールとして取り込むことができます。

.MyButton {
    background-color: #FF8A80;
    padding: 20px;
}

import * as React from 'react';
import './MyButton.css';

const MyButton = (props) => {
    return (
        <button type="submit" className="MyButton">BUTTON</button>
    );
};

export default MyButton;

HTML要素にclass名を振るのと同じ要領でJSX内で指定する際にはclassNameを用います。
ポイントはMyButton.cssをimportしている点です。
これにより別ファイルで用意したCSSを読み込み、スタイルを適用することができます。

Webpackに強く依存する点をどう評価するかにもよりますが、便利な記法です。