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.css.MyButton {
    background-color: #FF8A80;
    padding: 20px;
}

MyButton.css
1 2 3 4	`.MyButton {` `background-color:` `#FF8A80;` `padding:` `20px;` `}`

MyButton.tsximport * as React from 'react';
import './MyButton.css';
 
const MyButton = (props) => {
    return (
        <button type="submit" className="MyButton">BUTTON</button>
    );
};
 
export default MyButton;

MyButton.tsx
1 2 3 4 5 6 7 8 9 10	`import` `* as React from` `'react';` `import` `'./MyButton.css';` `const MyButton = (props) => {` `return` `(` `<button type="submit"` `className="MyButton">BUTTON</button>` `);` `};` `export` `default` `MyButton;`