Question

我有范围组件（如下）。而且我想要它的样式，使其条形高度为50px并具有渐变色。

我在文档中发现如何通过theme \ variables.scss（我在这里修改这个var：$ range-ios-bar-height＆amp; $ range-ios-bar-background-color），但是所有我的范围组件将获得样式的更改，但我只需要范围元素的特定实例。

如何将这些更改仅应用于特定的离子范围？

<ion-range min="0" max="100" snaps=false pin="true" color="secondary" [(ngModel)]="colorSlider">
    <ion-icon range-left small name="palette"></ion-icon>
    <ion-icon range-right name="palette"></ion-icon>
</ion-range>

Answer 1

您可以为元素创建类属性，以便只更改具有相同类名的样式。

<ion-range class="customize" min="0" max="100" snaps=false pin="true" color="secondary" [(ngModel)]="colorSlider">
    <ion-icon range-left small name="palette"></ion-icon>
    <ion-icon range-right name="palette"></ion-icon>
</ion-range>

然后在variable.scss（或相应的scss文件）中：

ion-range{
   &.customize{
      height: 20px; 
   }
}

因此，只有自定义类的离子范围才有高度：20px，其他的则使用默认高度。

你不能覆盖sass中仅一个组件的变量，因为它与sass变量相对应，这意味着全局设置。

如何将样式应用于特定的离子组件而不会覆盖其他组件

1 个答案: