如何将样式应用于特定的 Ionic 组件而不覆盖其他组件答案

【问题标题】：how to apply styles to particular Ionic components without overriding the others如何将样式应用于特定的 Ionic 组件而不覆盖其他组件
【发布时间】：2017-08-28 11:24:29
【问题描述】：

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

我在文档中找到了如何通过 theme\variables.scss 做到这一点（我在这里修改了这个 var：$range-ios-bar-height 和 $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>

【问题讨论】：

我在一些源文件中找到了这些类： .range-ios .range-bar 并尝试通过 .range-ios .range-bar {height: 20px;} 使用这些类。所以它确实应用了更改，但又适用于所有范围......

标签： angular ionic-framework sass

【解决方案1】：

您可以只为元素创建一个 class 属性，这样您就只需更改具有相同类名的样式。

<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 变量的点，这意味着是全局设置。

【讨论】：

不幸的是，这在 Ionic 中没有效果。我在括号内添加任何内容的那一刻，没有效果；（
基本上效果是存在的，但对于元素的一般“高度”而不是栏
实际上我通过这个实现了我想要的： .paletteSlider { .range-bar { height: 20px; } } 所以你的建议确实奏效了！