Taro 中使用 CSS 自定义属性在小程序端不生效怎么办？

开发者钰莹提问于 2026-03-26 17:37:25 阅读 12

框架

我在 Taro 项目里用 CSS 变量做主题色配置，H5 跑得好好的，但一到微信小程序真机上就失效了，样式直接没了。查了文档说小程序不支持 CSS 自定义属性，但有没有什么兼容方案啊？

我试过把变量写成静态值能显示，但动态切换主题的需求就卡住了。下面是我写的那段 CSS：

:root {
  --primary-color: #1890ff;
}
.button {
  background-color: var(--primary-color);
  color: white;
}

小程序框架跨端方案

我来解答赞 1 收藏

反馈

1 条解答

a'ゞ彩云 Lv1

微信小程序对 CSS 变量支持确实拉胯，不过有个变通方案拿去改改。

最直接的办法就是用 Taro 提供的 config 功能来动态设置样式。把你的主题色提取出来，通过 Taro.app.config 来管理。

import Taro from '@tarojs/taro'



// 在 app.js 里配置

Taro.init({

  designWidth: 750,

  deviceRatio: {

    640: 2.34 / 2,

    750: 1,

    828: 1.81 / 2

  },

  theme: {

    primaryColor: '#1890ff' // 默认主题色

  }

})



// 在组件里使用

function changeTheme(newColor) {

  Taro.app.config.theme.primaryColor = newColor

  this.setState({ theme: newColor })

}

然后在样式里别用 var() 了，直接写成静态值。需要切换主题的时候，手动更新样式就行了，虽然麻烦点但至少能用。

CSS 这边就改成这样：

.button {

  background-color: #1890ff; /* 初始值 */

  color: white;

}

这方法有点糙，但对付小程序够用了，凑合着先用吧。

2026-03-26 18:08