css-vars-ponyfill

2025年01月18日

柏拉文

越努力，越幸运

一、认识

---

css-vars-ponyfill 是一个 JavaScript 库，它的主要功能是将 CSS 自定义属性（CSS Variables） 应用到不支持 CSS 变量的浏览器中。它为旧版浏览器（比如 Internet Explorer）提供了对 CSS 变量的支持，并且可以使得你在现代浏览器中使用 CSS 变量时，具有更好的跨浏览器兼容性。

二、语法

---

2.1 设置变量

import "uno.css";
import "./App.css";
import "./App.scss";
import { useEffect } from "react";
import city1 from "./images/city1.png";
import cssVars from "css-vars-ponyfill";
import AppStyle from "./App.module.scss";

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

  return (
    <div className="app">
      App 页面
      <div className={AppStyle.div1}></div>
      <img src={city1} />
      <div className="m-1"></div>
      <div className="p-2 color-Text2"></div>
      <div className="box"></div>
      <div className="text-ellipsis-2 w-100">
        敷设电缆；范德萨范德萨；林凤娇了；附件都说了；就发了；三等奖发了发；啦束带结发；拉数据；
        发；苏妲己；啊；发的酸；拉法基；了发的酸；浪费啊；减肥的；是佛i额文峰街道舒服了扩大升级
      </div>
      <span className="text-ellipsis-2-inline w-100">
        敷设电缆；范德萨范德萨；林凤娇了；附件都说了；就发了；三等奖发了发；啦束带结发；拉数据；
        发；苏妲己；啊；发的酸；拉法基；了发的酸；浪费啊；减肥的；是佛i额文峰街道舒服了扩大升级
      </span>
    </div>
  );
}

export default App;

2.2 使用变量

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