Как записать это с помощью CSS-модулей?

Question

[asqwerty]

Здравствуйте. Есть компонент, у которого классы прописаны вот таким образом (извините за то, что картинкой):

Подскажите, пожалуйста, как прописать эти же классы, но с помощью CSS-модулей. Спасибо

Answer 1

[Scoo909010]

className={`${styles.modal__wrapper} && ${props.isOpened ? styles.open : styles.close}` }
Я бы попробовал что-то вроде. Не уверен, что это сработает, конечно, но по идее должно.

Comments

[asqwerty]

Спасибо за ответ, но я сделал немного по-другому (спустя час размышлений):
Вынес классы в отдельный массив и заджоинил их в className
let rootClasses = [cl.modalWrapper, props.visible ? cl.open : cl.close];
className={rootClasses.join(' ')}
Вас тоже ответом отмечу

Answer 2

[Александр Смирнов]

Советую воспользоваться библиотекой для вашей задачи. В рабочих проектах работает отлично. На будущее советую искать готовое решение, бОльшую часть задач кто-то уже решил до вас и нашел наиболее оптимальный способ

Answer 3

[asqwerty]

Решил вот так:

let rootClasses = [cl.modalWrapper, props.visible ? cl.open : cl.close];
className={rootClasses.join(' ')}