参考例付き！Reactでのスタイリング方法について

React.jsの基礎 | state・propsについて

また、今回紹介する実装例はすべてcreate-react-app(3.4.0)で作成したものを元に実装してます。

CSS Module

概要

実装例

.test {
 background-color: red;
}

import styles from './xxx.module.css';

CSS In JS

概要

npm install @mui/material

②使用するjsファイルでstyledをインポートする

import { styled } from '@mui/system';

③styledを使ってコンポーネントを定義する

const MyComponent = styled('div')({
  backgroundColor: 'aliceblue',
});

※ここでのcssのプロパティ名はキャメルケースで書きます。

④定義したコンポーネントを配置する

Styled div

概要

これをメインのスタイルの書き方とするのはよくないとされています。ですが、ちょっとした条件で動的にスタイル切り分けたい箇所で書くのはそこそこ見かけますね。

実装例①

①jsファイルにスタイル定義を用意

const divStyle = {
  color: 'blue',
  backgroundImage: 'url(' + imgUrl + ')',
};

②用意した定義を要素のstyle属性にセット

;

この例のように画像のURLをAPIで取ってきた値や別で定義したものをあてはめるとかもできますね。

実装例②

①要素に直接書く

;

この例のように三項演算子を使って、持っているpropsの状態に応じて動的にスタイルを変えることもできますね。

CSS フレームワーク

概要

フレームワークを使ってスタイリングする方法です。

使用するフレームワークによるかもしれませんが、大体のものはフレームワークが用意してくれたclassName名props名をコンポーネントにつけていくことでスタイリングできるものとなっています。

主なライブラリとしては以下のものがあります。

Bootstrap

Tailwind CSS

実装例

npm install react-bootstrap bootstrap

import 'bootstrap/dist/css/bootstrap.min.css';

import { Button } from 'react-bootstrap';

テスト

まとめ

今回はReactのスタイリング方法について、簡単な実装例を交えて紹介していきました。

最後に、まとめとして、それぞれのメリット・デメリットを上げて終わりにしようと思います！

• CSS Module

メリット：

jsファイルとcssファイルを分けて書くこと出来て分かりやすい。ピュアなCSSで書ける。

デメリット：

jsの変数をcssに渡すことが出来ない。

• CSS In JS

メリット:

jsの変数をcssに入れることが出来る。

デメリット：

jsファイルにcssを書くので一つのファイルが少し長くなったり、ごちゃごちゃする。

• インラインスタイル(ベタ書き)

メリット:

ライブラリを入れなくても手軽に実装できる。

デメリット：

各要素の書いていく方法なので、要素が読み辛くなる。タグにpropsもあるならなおさら。

• css フレームワーク

メリット:

デメリット：