如何在共享样式的Polymer元素中修改CSS变量

Question

大家晚上好

我想知道可以修改CSS变量的值，并且此更改是否会立即在包含该变量的每个聚合物元素上立即生效。

这是我想动态更改的CSS变量的说明：

{
....
"babel": {
    "plugins": [["import", [
      {
        "libraryName": "antd",
        "libraryDirectory": "lib",   // default: lib
        "style": true
      },
      {
        "libraryName": "antd-mobile"
      },
    ]]]
  }
}

祝你晚上愉快

NeitoFR

编辑1：我尝试了@ d.mares给定的第一种方法，但是它不起作用。 正如您在图片上看到的那样，它显示在element.style部分上，但不会覆盖主机定义，也不会分布在其他元素上。

编辑2： 通过做一些研究，我设法得到一个错误，部分回答了我的问题： 所以..看来它不是可动态更改的。我需要找到另一种方法。

Answer 1

是的，您可以调用this.updateStyles并传递新值：

  this.updateStyles({
    '--apc': 'blue',
    '--as': 'red'
  });

Answer 2

要获得全局效果，您需要修改保存变量原始声明的元素。

  

CSS变量受级联约束并从其继承值   他们的父母。

从docs