Repository navigation
Taro Next 在微信小程序中无法用 js 设置 css variable #7436
Description
相关平台
微信小程序
复现仓库
https://github.com/Miaonster/test-taro-style-variable
小程序基础库: 2.12.1
使用框架: React
复现步骤
// src/pages/index/index.jsx
document.documentElement.style.setProperty('--color', '#00ff00')
// 或者
document.body.style.setProperty('--color', '#00ff00')/* src/pages/index/index.css */
.index {
background-color: var(--color);
}js 中设置 --color 变量，在 css 中使用，都无法获得变量的值。
除了上面的现象，还有另外一个相关问题，使用 getPropertyValue 也无法获得值，而如果设置的变量不以 -- 开头是可以获得的，应该是 @tarojs/runtime 中的下列代码导致：
public getPropertyValue (propertyName: string) {
// 这里应该判断一下是否是 - 开头
propertyName = toCamelCase(propertyName)
const value = this[propertyName]
if (!value) {
return ''
}
return value
}不过即便将 getPropertyValue 错误修复之后，也无法让 css 中正确使用变量
期望结果
可以在 css 中使用 js 设置的 variable
实际结果
无法在 css 中使用 js 设置的 variable
环境信息
👽 Taro v3.0.8
Taro CLI 3.0.8 environment info:
System:
OS: macOS 10.15.5
Shell: 3.0.2 - /usr/local/bin/fish
Binaries:
Node: 14.3.0 - ~/.config/nvm/14.3.0/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.14.5 - ~/.config/nvm/14.3.0/bin/npm
npmPackages:
@tarojs/components: 3.0.8 => 3.0.8
@tarojs/mini-runner: 3.0.8 => 3.0.8
@tarojs/react: 3.0.8 => 3.0.8
@tarojs/runtime: 3.0.8 => 3.0.8
@tarojs/taro: 3.0.8 => 3.0.8
@tarojs/webpack-runner: 3.0.8 => 3.0.8
babel-preset-taro: 3.0.8 => 3.0.8
eslint-config-taro: 3.0.8 => 3.0.8
react: ^16.10.0 => 16.13.1
Activity
luckyadam commentedon Aug 26, 2020
Taro 提供的 DOM API 是模拟的 API ，并不是真实的 DOM，小程序本身也没有提供 DOM 的接口，所以按照 issue 中的使用方式来设置是无效的，如果想要在小程序中使用 CSS 变量，可以参考这篇文章，改写成 Taro 写法就好
Miaonster commentedon Aug 28, 2020
感谢回复，现在通过在顶层元素设置 style 来解决
JamesMonges commentedon Jun 8, 2023
这个写法还是不够动态，我希望在js中得到的计算变量使用到scss中，参考的文章对我用处不大