如何在 css 文件中使用 API 颜色变量？

Question

我background-color从 API 中得到一个变量名settings.brand_color。我想在 html 元素中使用该变量。我不能使用style属性，因为我:before在我的应用程序中使用了选择器。我想在我的 css 文件中传递该 API 变量并在我的:before伪选择器中使用它。

JSX

      <input
        id={languageLabel}
        type="radio"
        name="language-select"
        value={languageLabel}
        // defaultChecked={index === 0}
        onChange={() => {
          onLanguageChange(language, languageLabel);
        }}
        className="focus:ring-0  mr-5 my-18p default-style radio__input"
      />
      <div className="radio__radio"></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: #f28b46;
  border-radius: 50%;
  transform: scale(0);
  z-index: 9;
}

Answer 1

您可以使用 CSS 自定义属性作为颜色的变量，使用以下:root类：

:root {
  --brand-color: #f28b46;
}

.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);
  border-radius: 50%;
  // transform: scale(0);
  z-index: 9;
}

<div class="radio__radio"></div>

当从 API 获取品牌颜色时，创建样式标签并更新:root品牌颜色。

注意：最后一个 :root 变量将覆盖之前的任何 :root 变量，因此您需要确保<style>在初始 CSS 文件之后使用品牌颜色创建 :root 变量。

:root {
  --brand-color: yellow; // will be overridden
}
:root {
  --brand-color: red; // that's the color that will show
}

我知道你正在使用 React，所以你可以这样做：

const [brandColor, setBrandColor] = useState();

useEffect( () => {
    fetchBrandColorFromAPI().then(brandColor => setBrandColor(brandColor));
}, [])

然后在渲染器中：

{brandColor && <style dangerouslySetInnerHTML={{ __html: ` :root {
    --brand-color: ${brandColor}
}`}} /> }

Answer 2

虽然你不能直接在 JS 中设置伪元素的样式，但你可以设置一个 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;
  --bg: #f28b46; /* ADDED for initial condition */
}

.radio__radio::after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  background: var(--bg);
  border-radius: 50%;
  transform: scale(0);
  z-index: 9;
}

然后在您的 Javascript 中，当您获得新的背景颜色时：

document.querySelector('.radio__radio').style.setProperty('--bg', newvalue);

或者当然选择所有这样的单选按钮并根据需要更改每个单选按钮。

Answer 3

最好且最简单的方法是在 JSX 代码中添加样式。

<input
id={languageLabel}
type="radio"
name="language-select"
value={languageLabel}
// defaultChecked={index === 0}
onChange={() => {
  onLanguageChange(language, languageLabel);
}}
className="focus:ring-0  mr-5 my-18p default-style radio__input"
/>

只需将此部分添加到您的 JSX 文件中即可

<style>
    {`
        .radio__radio::before {
        background-color: ${settings.brand_color}
        }
    `}
</style>