Как вообще пользоваться .module.css в React?

Question

[Almaz Familia]

как вообще писать на этом модуле css . раньше просто писал на обычном css . теперь надо как бы большой проект.
как сделать так что бы в одном html элементе был 2 класса например обычно className={isActive ? "page : ""page active"} можно добавить дополнительный класс а как сделать на .module ?

ладно хотя это просто Active в будущем будет же другие ситуаций где надо 2-3 доп класса добавить как тогда
так много не нужно кода надо будет писать ?

Answer 1

[Михаил Р.]

как сделать так что бы в одном html элементе был 2 класса например обычно className={isActive ? "page : ""page active"} можно добавить дополнительный класс а как сделать на .module ?

import styles from 'Button.module.css';
import cx from 'classnames';

<button className={cx(styles.button, styles.disabled)}>Button</button>

Гугл пробовали? Первые 2 строки Using CSS Modules in React, Css Modules by Example.

Answer 2

[Егор Живагин]

В лоб, без использования доп библиотек и подходов:

className={isActive ? styles.page : `${styles.page} ${styles.active}`}
// или
className={styles.page + ' ' + isActive ? styles.active : '' }

С classnames:

import cx from 'classnames';

className={cx(styles.page, { [styles.active]: isActive })}