[React] Reactでのスタイル指定はどうするの？

概要

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

---

ソリューション

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

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

早速見ていきましょう。

---

インラインスタイル

名前の通り、インラインスタイルとしてJSXにスタイルを適用する手法です。
style属性に、オブジェクトとして定義したスタイルを指定します。

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

スタイルオブジェクトについて

styleとして定義したオブジェクトはReact.CSSPropertiesというデータ型になります。
プロパティの検証/補完をしてくれるので、オブジェクトを切り離して宣言する場合は、明示的に型指定するようにしましょう。

const styledDivColor :React.CSSProperties = {
  color: 'red'
}

<div style={styledDivColor}>赤色</div>

メリットとデメリット

• メリット
  • 簡単にスタイル定義ができる
• デメリット
  • メディアクエリや擬似要素が利用できない
  • スタイル再利用ができない

---

CSVインポート

外部ファイルとして定義したCSSをコンポーネントでインポートする手法です。

`1. CSSファイルの作成

/* sample-import.css */
.color-red-component {
  color: red;
}

`2. 作成したCSSをコンポーネントでインポート

// SampleImportCsv.tsx
import './sample-import.css';

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

export default SampleImportCsv;

メリットとデメリット

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

---

CSS Modules

CSSクラス名がグローバルスコープではなく、ローカルスコープで定義されるようにする技術です。
前述のCSSがグローバルスコープで適用されてしまう問題を解決することができます。

`1. .module.css の形式でCSSを作成します。

/* sample.module.css */
.title {
  color: red;
}

`2. コンポーネントdmoduleをインポートし、スタイル適用したい要素のクラス名に対応するクラス名を指定します。

// SampleComponent.tsx
import styles from './sample.module.css';

const SampleComponent: FC = () => {
  return <h1 className={styles.title}>Hello!</h1>
}

`3. 一意のクラス名が割り当てられ、対応するスタイルが適用されます。

<h1 class="_title_11mo7_1">Hello!</h1>

---

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>

動的なスタイルの指定

コンポーネントに渡されたプロパティを基にスタイルを動的に指定することも可能です。

import styled from 'styled-components';

interface Props {
  width: number;
  height: number;
}

const Icon = styled.img<Props>`
  width: ${(props) => props.width}px;
  height: ${(props) => props.height}px;
`;

const image_path = 'path/to/image.jpg';
const width = 50;
const height = 50;

<Icon src={image_path} alt="profile" height={height} width={width} />;

メリットとデメリット

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

---

CSSフレームワーク

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

---

まとめ

CSS-In-JSのパフォーマンス影響がどれくらいあるのかも気になるところですが、個人的にはCSS Moduleを採用していこうと思いました。