🍊

CSS Modulesをreactに導入

2023/07/27に公開
  • 特別なnpmパッケージは必要ない。

  • ファイル名を変える

    • textInput.scsstextInput.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

Discussion