Как взаимодействовать с bootstrap и моими стилями в React?

Например у меня есть такой код компонента

<div className="d-flex theme-panel">
   ...
</div>

.d-flex - это класс bootstrap

.theme-block - это мой класс с описанием цвета блока для цветовой схемы

Так вот в чем вопрос:

У меня на данный момент в index.js импортируются 2 css файла, bootstrap.css и style.css

Для безболезненного изменения цветовой схемы я хочу переписать код компонента так:

<div className={myStyle.themePanel}>  // Куда здесь запихать .d-flex?
   ...
</div>

С моими стилями все понятно, импортирую и юзаю, а вот как быть с глобальными стилями bootstrap? Как их использовать совместно с css-modules?


Ответы (1 шт):

Автор решения: Ajeet Shah

Поскольку myStyle.themePanel также является string:

<div className={`d-flex ${myStyle.themePanel}`}>
   ...
</div>

Шаблонные строки

→ Ссылка