使用 Stylus 将主题颜色应用于常规 HTML 元素答案

【问题标题】：Apply theme color to regular HTML element using Stylus使用 Stylus 将主题颜色应用于常规 HTML 元素
【发布时间】：2020-04-28 20:37:38
【问题描述】：

我想将常规 HTML 元素（比如说span）的颜色更改为主题颜色之一。如何从 Stylus 文件中引用此颜色（主要/重音/等）？

我找到的几乎所有答案都描述了如何使用 SCSS 执行此操作，但似乎提供的解决方案在 Stylus 的情况下不起作用。

【问题讨论】：

标签： angular angular-material angular7 stylus

【解决方案1】：

primary,accent,... 是类，所以你需要使用 ngClass 或 class.primary

<span [ngClass]="variable">...</span>
//and 
variable='myClass'

//or
<span [ngClass]="{'primary':condition}">...</span>
//or
<span [class.primary]="condition">...</span>

你使用 [ngStyle] 或 [style.property] 的方式

<span [ngStyle]="myStyle">..</span>
e.g.
myStyle={'background-color':red,width:'1rem'}
//or

<span [ngStyle]="{color:variable}">...</span>
//and
variable='red'

//or
<span [style.color]="'red'">...</span>

//or
<span [style.color]="variable">...</span>
//and 
variable='red'

你可以看到更多的例子，例如this link

【讨论】：

感谢您的回答！不幸的是，我找不到类“主要”或“口音”。相反，Angular 提供了“mat-primary”和“mat-accent”类，但它们只能应用于有限的 HTML 元素集。