在html中设置var值css

Question

我正在将应用程序从Ionic 1迁移到Ionic 4，但是css存在问题（我对css和样式不太了解），在variables.scss中创建了一个变量

--my-color-secondary: #5BC500;

我需要一个离子按钮来获取该值，但是我没有成功，但是如果我这样创建按钮：

<ion-button color="primary">Go</ion-button>

采用--ion-color-primary: #3880ff;

中定义的默认值

Answer 1

第一个color不是有效的HTML属性。离子“可以”为您转换，但我对此表示怀疑。您应该应用class="myClass"或内联style=""

---

CSS变量必须应用于样式声明中。通常，这意味着在样式块（或导入的样式表）中，如下所示：

--main-bg-color: #cc0000;

.className {
  background-color: var(--main-bg-color);
}

您还可以像这样设置内联变量值：

button {
  color: var(--myTextColor);
  font-weight: bold;
  background-color: #dadada;
}

<button style="--myTextColor: #cc0000;">Button</button>

这需要针对设置变量的元素进行单独的样式设置。

注意： 变量将不会在具有内联样式的元素范围之外工作。