Как в React Modules Stylesheet использовать со своими стилями?

Question

[Капитан Какао]

К примеру у меня есть такой блок

<div className="nav df fdc">

</div>

nav - я хочу использовать только внутри модуля
df - это глобальный класс
fdc - тоже глобальный

По идеи можно сделать так, но это не работает

<div className=`{st.nav} df fdc`>

</div>

В документации примера такого использования тоже не описано(

Answer 1

[Demian Smith]

Глобальные классы обычно выставляются глобально, например в index.css и подключаются, например в index.js как:

import './index.css'

А CSS модули хранятся рядом с кодом компонентов и сами файлы, именуются с суффиксом module, например Header.module.css. Подключаются CSS модули в самих компонентов как-то так:

import styles from './Header.module.css'

И используются так:

<div className={`${styles.header} global-class-1 global-class-2`}></div>

Comments

[Капитан Какао]

Да, у меня глобальные в отдельном файле и подключены к App.js но вопрос был в том, как поместить глобальный класс и локальный из переменной. Собственно к такому же решению и пришёл.
Но всё равно спасибо!

[Demian Smith]

Капитан Какао, рекомендую обратить внимание на библиотеку `classnames` (https://www.npmjs.com/package/classnames). Она позволяет объединять несколько классов и задавать условия их появления.

Что-то типа:

import cx from 'classnames';

<div className={cx('class1', {class2: false, class3: true}, 'class4')}></div>

Выведет див с классами "class1 class3 class4".

Крайне удобно когда нужно выводить какие-то классы по условию.

Answer 2

[Капитан Какао]

А всё, разобрался сам, нужно всё это дело ещё раз обернуть в фигурные скобки и добавить к переменной $, вдруг кому пригодиться

<div className={`${st.nav} df fdc`}>

</div>