[React] スタイル指定方法 #React

概要

Reactでのスタイル適用方法についてまとめました。

ソリューション

ReactでCSSを用いる場合、基本的には以下いずれかの対応となります。

インラインスタイル
cssインポート
CSS-In-JS
CSSフレームワークの導入

インラインスタイル

インラインスタイルとしてJSXにスタイルを適用する
style属性にオブジェクトとして指定する。

<>
  <div style={{ color: 'red' }}>赤色</div>
</>

メリットとデメリット

メリット
- 記載が簡単
デメリット
- メディアクエリや擬似要素が利用できない
- スタイルの再利用が行えない

CSVインポート

外部ファイルとして定義したCSSをインポートする

SampleImportCsv.css

.color-red-component {
  color: red;
}

SampleImportCsv.tsx

import './SampleImportCsv.css';

const SampleImportCsv = () => {
  return (
    <>
      <div className="color-red-component">赤色コンポーネント</div>
    </>
  );
};

export default SampleImportCsv;

メリットとデメリット

メリット
- スタイルの再利用が可能
デメリット
- スタイルの適用範囲はインポートしたコンポーネントだけでなく、アプリケーション全体となる
  - app.css など全体に適用したいスタイルはこの方法を用いる

CSS-In-JS

JSファイルの中にCSSを記載する手法。
styled-components や emotionなどの、ライブラリを用いる。

サンプルコード

import styled from 'styled-components';

const PickUpButton = styled.button`
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;

  &:hover {
    background-color: #0056b3;
  }
`;

const SampleImportCssInJs = () => {
  return (
    <div>
      <PickUpButton>Click Me</PickUpButton>
    </div>
  );
};

export default SampleImportCssInJs;

生成されるHTML

ランダムなクラスが指定されます。
これにより、独立したコンポーネントに飲みスタイルを適用することが可能です。

<button class="sc-eqUzNf iIlGPi">Click Me</button>

メリットとデメリット

メリット
- コンポーネントごとに独立したスタイルを定義することができる
デメリット
- コンポーネントがレンダリングされるたびにJS内部のCSSがロードされるため、性能低下に繋がりやすい

CSSフレームワーク

Bootstrapや, TailWind CSSを用いる。
こちらは割愛します。

まとめ

初見時はCSS-In-JSがいいと思っていましたが、パフォーマンスの影響を考えるとなんとも言えないですね...

最近は下火傾向なようだし...