Чтобы изменить CSS в зависимости от значения состояния, вы можете использовать несколько методов. Вот несколько вариантов:

1. JavaScript/jQuery: вы можете использовать JavaScript или jQuery для управления CSS на основе значения состояния. Вам нужно будет прослушивать изменения в состоянии и соответствующим образом обновлять свойства CSS. Это можно сделать, получив доступ к атрибуту стиля HTML-элемента и изменив его.

Пример использования JavaScript:

// Assuming you have a state variable called 'stateValue'
const element = document.getElementById('your-element-id');
element.style.color = stateValue === 'active' ? 'red' : 'blue';

Пример использования jQuery:

// Assuming you have a state variable called 'stateValue'
$('#your-element-id').css('color', stateValue === 'active' ? 'red' : 'blue');

2. Классы CSS. Другой подход — определить разные классы CSS для разных состояний и динамически применять эти классы на основе значения состояния. Вы можете использовать JavaScript для добавления или удаления классов из элементов в зависимости от состояния.

Пример:

// Assuming you have a state variable called 'stateValue'
const element = document.getElementById('your-element-id');
element.classList.toggle('active', stateValue === 'active');

В вашем CSS-файле вы должны определить стили для «активного» класса:

.active {
  color: red;
}

3. Псевдоклассы CSS. Псевдоклассы CSS можно использовать для применения стилей в зависимости от состояния элемента. Например, вы можете использовать псевдокласс :hoverдля изменения стилей при наведении курсора мыши на элемент. Аналогичным образом вы можете использовать :focusдля элемента, имеющего фокус, или :checkedдля отмеченных флажков или переключателей.

Пример:

#your-element-id:hover {
  color: red;
}

Это всего лишь несколько способов изменения CSS в зависимости от значения состояния. Лучший подход будет зависеть от вашего конкретного варианта использования и технологий, которые вы используете.