Как я могу изменить пользовательскую переменную в JSX для передачи в CSS var ()?

Question

Я бы хотел отредактировать переменную cat-color в filter_category в зависимости от условия. Вот минимальный рабочий пример CSS файла

:root {
  --cat-color: red;
}

.categories_filter {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: center;

  .filter_category {
    background-color: #fafafa;
    cursor: pointer;
    color: var(--cat-color);
  }
}

А вот минимальный рабочий пример JSX, который включает в себя стиль css, в котором я хочу изменить его свойство произвольным образом.

return (
  <Layout {...this.props}>
    <div className="inner">
      <ul className="categories_filter">
        {newCats.map((category, id) => (
          <li
            key={id}
            className={`${
              category === activeCategory && "activeCat"
            } filter_category`}
            onClick={() => this.handleFilter(category)}
          >
            {category}
          </li>
        ))}
      </ul>
  </div>
)

Answer 1

По сути, способ реагирования - это изменение класса, который у него есть, а не самого класса. Вы могли бы go что-то вроде этого:

return (
  <Layout {...this.props}>
    <div className="inner">
      <ul className="categories_filter">
        {newCats.map((category, id) => (
          <li
            key={id}
 V          className={`${
             ( category === activeCategory) ? "activeCat" : 
               "filter_category"}`}
            onClick={() => this.handleFilter(category)}
          >
            {category}
          </li>
        ))}
      </ul>
  </div>
)

Answer 2

Думаю, этот пост поможет вам - https://davidwalsh.name/css-variables-javascript

document.documentElement.style
    .setProperty('--my-variable-name', 'pink');