html - 如何更改 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>
)

标签： htmlcssreactjs

Answer 1

基本上，这是在 react 中完成的方式是改变它拥有的类，而不是类本身。你可以这样做：

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>
)