Примените имя класса модуля CSS, напрямую обращаясь к DOM

У меня есть компонент, который использует CSS-модули, с помощью babel-plugin-react-css-modules плагин.

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

В моей таблице стилей SCSS у меня есть класс с именем .full-width что я хочу применить к элементу DOM компонента, чтобы сделать расчет, а затем удалить его снова.

Теперь, поскольку добавление класса и его удаление за доли секунды не влияет на компонент или его состояние, я хочу добавить и удалить класс, напрямую обращаясь к DOM и не пытаясь каким-либо образом связать его с компонентом. state,

Если я сделаю this.DOMReference.classList.add('full-width'); класс full-width добавлен к нему, но я хочу добавить модульную версию класса, как это было бы применено, если бы я сделал styleName="full-width" (например Component__full-width___Pjd10)

Есть ли способ сделать это без .full-width глобальная декларация?

Смогу ли я сделать это с react-css-modules?

Источник

2 ответа

Решение

Ну, я понял, что я могу импортировать стили, например, под переменной, а не анонимно

import styles from './styles.scss' вместо import './styles.scss' и тогда я могу использовать его как таковой

this.DOMReference.classList.add(styles['full-width']);

Я также не должен использовать styleName="styles.someClass" либо я могу просто использовать styleName="someClass" (до тех пор, пока импортируется только один файл таблицы стилей, в противном случае вы должны сделать это как первый)

Я хотел бы услышать лучшие способы сделать это.

Источник

Использование в Next.js

Если вы используете Next.js, он идеально подходит для этого.

Импорт CSS-модуля

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

На вашей функции

      element.classList.add(styles['full-width'])
Источник
Другие вопросы по тегам