Как задать класс с помощью JS переменной в модульном css

Question

Допустим есть переменная popupName, в ней находится какое-либо имя, допустим "login" или "register".

Есть элемент:

<section className={`${styles.popup} ${popupOpened ? styles.popup_opened : ''}`}>

Вопрос: Как задать в модульной системе классов класс с использованием переменной? Чтобы класс мог меняться от значения переменной. Использую дефолтный module.css от react.

Answer 1

import styles from 'Твой css модуль';


const popupName = "login"; // или "register"

// Используем переменную для динамического присвоения класса
const className = `${styles.popup} ${popupOpened ? styles.popup_opened : ''} ${styles[popupName]}`;

// Затем применим className к элементу
<section className={className}>
</section>

БЛОГ НА HUSL

Как задать класс с помощью JS переменной в модульном css

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