如何在CSS文件的:before/:after伪选择器中使用动态颜色变量？

解决方案 #

可以通过CSS自定义变量实现API返回值透传到伪元素，伪元素会自动继承父元素上声明的CSS变量，无需直接操作伪元素的样式属性。

原生CSS实现方案 #

修改后的JSX代码

<>
  <input
    type="radio"
    name="language-select"
    className="focus:ring-0  mr-5 my-18p default-style radio__input"
  />
  {/* 将接口返回的品牌色赋值给自定义CSS变量 */}
  <div 
    className="radio__radio"
    style={{ '--brand-color': settings.brand_color } as React.CSSProperties}
  ></div>
</>;

修改后的CSS代码

.radio__radio {
  width: 24px;
  height: 24px;
  background-color: #d8d8d8;
  border-radius: 50%;
  box-sizing: border-box;
  padding: 6px;
  margin-right: 20px;
  z-index: 1;
}

.radio__radio::after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  /* 引用父元素的动态颜色变量，第二个参数为变量加载失败的兜底色 */
  background: var(--brand-color, #f28b46);
  border-radius: 50%;
  transform: scale(0);
  z-index: 9;
}

Tailwind CSS实现方案 #

如果使用Tailwind的伪类能力，可以不用单独维护CSS文件，直接在JSX内完成样式绑定：

<>
  <input
    type="radio"
    name="language-select"
    className="focus:ring-0 mr-5 my-18p default-style radio__input"
  />
  <div 
    className="w-6 h-6 bg-[#d8d8d8] rounded-full box-border p-1.5 mr-5 z-[1] after:content-[''] after:w-full after:h-full after:block after:bg-[var(--brand-color)] after:rounded-full after:scale-0 after:z-[9]"
    style={{ '--brand-color': settings.brand_color } as React.CSSProperties}
  ></div>
</>;

内容的提问来源于stack exchange，提问作者Chandler Bing