css-vars-custom

2025年01月18日

柏拉文

越努力，越幸运

一、认识

---

二、语法

---

2.1 设置变量

function setCssVars(
  variables: { [key: string]: string},
  useSetProperty = false
): void {
  if (useSetProperty) {
    const root = document.documentElement;
    Object.entries(variables).forEach(([variable, value]) => {
      root.style.setProperty(variable, String(value));
    });
  } else {
    const style = document.createElement("style");
    const cssVariables = Object.keys(variables)
      .map((variable) => `${variable}: ${variables[variable]};`)
      .join(" ");

    style.innerHTML = `:root { ${cssVariables} }`;
    document.head.appendChild(style);
  }
}

useEffect(() => {
    setCssVars({
      "--color-link": "#1677ff",
      "--color-bg-base": "#fff",
      "--color-primary": "#1677ff",
      "--color-success": "#52c41a",
      "--color-warning": "#faad14",
    });
}, []);

2.2 使用变量

.app{
    width: 800px;
    height: 800px;
    background-color: var(--color-primary, blue);
}