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

FRONT END

LiSMO techの小谷です。 

今回はReact.jsのスタイリング方法についてです!

今回の記事では、Reactの書き方や考え方をある程度知っている前提で記事を書きます。React.jsについて、あまり慣れていない方や復習したい方は以下の記事も書いたので、参考にしてみて下さい。

【React.js】クラスコンポーネントと関数コンポーネントの書き方について

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

 

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

 

CSS Module

概要

jsファイルとは別でcssを用意してスタイリングする方法です。

webpackのcss-loaderを利用したものです。loaderは他にもscss loaderなどもあり、scssとかも利用出来るように設定可能です。

create-react-appのバージョンが2.0以降のもので作成した場合は初めからCSS Moduleが利用出来るような形になっているようです。

 

HTMLに別ファイルのCSSを呼んで画面のスタイリングするように、JSに別ファイルのCSSを呼んで画面のスタイリングします。CSSファイルを切り分けて実装出来るので、Reactを使わない従来のHTMLに別ファイルのCSSを呼んで画面のスタイリングすることになれている方にはおすすめです。

 

また、この方法だとCSSをピュアなCSSで書けるものよい点です。後に紹介するJSファイル内にスタイルを書く方法ですと、プロパティ名をキャメルケースで書く必要がありますので、Reactに慣れていない方にはよりいっそうこのCSS Moduleはいいかもしれませんね。

実装例

①xxx.module.cssを用意し、中に適当にスタイルを定義する

.test {
 background-color: red;
}

②用意したxxx.module.cssを使用したいjsファイルでインポートする

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

※stylesでなくも名前は任意のもので大丈夫です。

 

③当てはめる要素のClassName属性に定義した名前をセット

CSS In JS

概要

jsファイルの中にcssも一緒に書いてスタイリングする方法です。

何らかのライブラリを使用して買います。主なライブラリとしては以下のようなものがあります。

material-ui

emotion

styled-components

実装例

以下はmaterial-ui(5.5.1)を使った例です。書き方は公式のこのページを参考にしてます。

①material-uiをインストール

npm install @mui/material

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

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

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

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

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

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

Styled div

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

    概要

    要素にstyle属性を直接書いてスタイリングする方法です。

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

    実装例①

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

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

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

    Hello World!
    ;

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

    実装例②

    ①要素に直接書く

    Hello World!
    ;

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

     

    CSS フレームワーク

    概要

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

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

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

    Bootstrap

    Tailwind CSS

    実装例

    Bootstrapを用いた例です。
    ①必要なライブラリをインストールする
    npm install react-bootstrap bootstrap
    ②上位のコンポーネントでインポートする
    僕の場合はsrc\index.jsで以下のようにインポートしました。
    import 'bootstrap/dist/css/bootstrap.min.css';
    ③コンポーネントをインポート
    使用したいjsファイルで使用するコンポーネントを以下のようにインポートします。
    import { Button } from 'react-bootstrap';
    ④コンポーネントを設置
    インポートしたコンポーネントを使用したい箇所で以下のように書きます。
    このvariant=”outline-secondary”がスタイルは定義しているものになるそうです。

    まとめ

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

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

     

    • CSS Module
    メリット:

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

    デメリット:

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

    • CSS In JS
    メリット:

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

    デメリット:

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

    • インラインスタイル(ベタ書き)
    メリット:

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

    デメリット:

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

    • css フレームワーク
    メリット:
    誰が実装しても同じスタイルになるので、統一性が取れる。
    デメリット:
    フレームワークが提供してくれる名前がどのcssプロパティを持つか調べたり慣れたりする必要がある。一部のマイナーなcssプロパティは自分で書く必要がある。

    ともに考え、寄り添う。プロのデザインチームが即参戦。

    販促ツールや一貫したデザインによるブランド構築などビジネスの成長をデザインの力で促進します。

    NEXTGATE LiSMOtechでは中小企業を中心にブランディング・WEBマーケティングを活用したWEB戦略を提供しています。

    企業課題・問題に関するご相談、WEBサイト制作やグラフィックデザイン制作のクリエイティブに関するご相談やご質問、お見積りなどお気軽にお問い合わせください。

    お得な情報がLINEに届く!!

    LINE公式アカウントはこちらから。

    友だち追加

    最新記事

    CONTACT

    NEXTGATE LiSMOtechでは中小企業を中心にブランディング・WEBマーケティングを活用したWEB戦略を提供しています。
    企業課題・問題に関するご相談、WEBサイト制作やグラフィックデザイン制作のクリエイティブに関するご相談やご質問、お見積りなどお気軽にお問い合わせください。

    平日10:00〜19:00

    お電話の場合こちらから

    043-305-4162

    平日10:00〜19:00