Как можно передать CSS-переменную через JavaScript внутрь CSS Modules, чтобы динамически менять стиль компонента?

Как работает передача CSS-переменных через JavaScript в CSS Modules

CSS-переменные (custom properties) позволяют хранить значения, которые можно переиспользовать в стилях. В CSS Modules переменные объявляются так же, как и в обычном CSS, но с учётом локальной области видимости модуля. Чтобы динамически менять стиль компонента, нужно через JavaScript установить новое значение CSS-переменной на нужном DOM-элементе.

Пример с React

Допустим, у нас есть компонент, который использует CSS Module с переменной --primary-color. Мы хотим менять цвет по клику.

// styles.module.css
:root {
  --primary-color: blue;
}

.button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
}

// Button.jsx
import React, { useRef } from 'react';
import styles from './styles.module.css';

function Button() {
  const buttonRef = useRef(null);

  const changeColor = () => {
    if (buttonRef.current) {
      buttonRef.current.style.setProperty('--primary-color', 'red');
    }
  };

  return (
    
      Click me
    
  );
}

export default Button;

В этом примере при клике на кнопку вызывается changeColor, который через setProperty меняет значение --primary-color на 'red'. Стиль кнопки обновляется мгновенно, так как CSS-переменная реактивна.

Где это применяется

• Темы оформления (светлая/тёмная)
• Динамические анимации
• Адаптивные компоненты, зависящие от состояния

Вывод: Использование CSS-переменных с JavaScript — простой и эффективный способ динамического управления стилями без перезагрузки страницы или изменения классов. Это особенно полезно в компонентных фреймворках, где нужно менять внешний вид на основе пользовательского взаимодействия или данных.