在 Ionic 3 中动态改变 CSS 值

Question

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

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

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

我的问题是，在 Ionic 中，我怎样才能改变variables.scss这些颜色（当我们打开一部新电影时更新）？

因为我们不能用自定义css修改tabs，所以我必须把它添加到 variables.scss...

Answer 1

如果你想在运行时像 sass 变量一样更新任何 css 颜色或像 font-size 这样的值，使用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>

sass 变量将在构建时编译为那里的值，因此它们在运行时不可重用