html - 在 Ionic 3 中动态更改 CSS 值

Question

在我的应用中，我有可以打开的电影详细信息，我希望详细信息的按钮与电影匹配。

例如，对于电影“回到 future ”，我的数据中有 colors = ["#000000","#123123"] .

如果我这样做 <div [ngStyle]="{'background-color': movie?.colors[0]}"> div 将是我想要的颜色。

我的问题是，在 Ionic 中，我该如何更改 variables.scss拥有这些颜色(在我们打开新电影时更新)？

因为我们不能修改带有自定义css的标签，所以我不得不把它添加到variables.scss ...

Answer 1

如果您想在运行时更新任何 css 颜色或值(如 font-size 之类的 sass 变量)，请使用 css 变量 以这种方式，您可以在运行时更新任何 css 属性值(如果它基于在 css 变量上，如我示例中的颜色，但它可以是任何 css 值

考虑这个例子

样式.css

:root {
--color : red;
}

 * {
   color:var(--color)
 }

应用组件

  colorList = ['green', 'blue'];

  updateColor(color) {
    document.documentElement.style.setProperty(`--color`, color);
  }

模板

<button *ngFor="let c of colorList" (click)="updateColor(c)">{{c}}</button>

stackblitz demo 🚀🚀

sass variable are going to compile at build time to there values so they are not reusable at run time