Taro Next 在微信小程序中无法用 js 设置 css variable

[Miaonster]

相关平台

微信小程序

复现仓库

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 

[luckyadam]

Taro 提供的 DOM API 是模拟的 API ，并不是真实的 DOM，小程序本身也没有提供 DOM 的接口，所以按照 issue 中的使用方式来设置是无效的，如果想要在小程序中使用 CSS 变量，可以参考这篇文章，改写成 Taro 写法就好

[Miaonster]

感谢回复，现在通过在顶层元素设置 style 来解决

/* index.js */
import './style.css'
const style = { '--primary-color': 'red' }
return <View style={style} className='container'>container elemet</View>

/* styles.css */
.container {
  color: var(--primary-color);
}

[JamesMonges]

这个写法还是不够动态，我希望在js中得到的计算变量使用到scss中，参考的文章对我用处不大