React でスコープをコンポーネントに限定して css を適用する

CSS Modules

github.com

React でスコープをコンポーネントに限定して css を適用する方法はないの？と思ってたら普通にあった。create-react-app で開始したプロジェクトを想定。

├ Button.tsx
└ Button.module.css

Button.module.css

.redButton {
  background-color: red;
}

Button.tsx

import React from 'react';
import styles from './Button.module.css';

const Button: React.FC = () => {
  return (
    <button className={styles.redButton}></button>
  );
}

export default Button;

create-react-app は CSS Modules を利用するためのお膳立てをしてくれていた。おわり。

その他メモ

一部だけ import

- import styles from './Button.module.css';
+ import { redButton } from './Button.module.css';

- <button className={styles.redButton}></button>
+ <button className={redButton}></button>

css セレクタにケバブケース（hoge-hoge）が含まれている場合

どうしてもキャメルケース（hogeHoge）にできないなら。

Button.module.css

.red-button {
  background-color: red;
}

Button.tsx

import React from 'react';
import styles from './Button.module.css';

const Button: React.FC = () => {
  return (
    <button className={styles['red-button']}></button>
  );
}

export default Button;

import { red-button } from './Button.module.css'; は構文エラー

追記

ググるより公式ドキュメント見たほうがいい。

create-react-app.dev