CSS Modulesをreactに導入

• 特別なnpmパッケージは必要ない。

• ファイル名を変える

  • textInput.scss→ textInput.module.scss

• stylesで読み込む

  • import styles from './TextInput.module.scss';

• 各所でstyles.〇〇で呼び出す。

  • className={styles.input}

• モディファイアはちょい複雑だけどclsxで管理できる

  className={clsx(
              styles.input,
              { [styles[`size-${size}`]]: size },
              { [styles['-error']]: errorMessage }
            )}
  

参考

https://zenn.dev/catnose99/scraps/5e3d51d75113d3#comment-d590f8254dd8b5