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

我有范围组件（如下）。我想要设计它的条纹高度为50px并且具有渐变色。如何将样式应用于特定的离子组件而不会覆盖其他组件

我在文档中找到了如何通过主题\ 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>

来源

2017-08-27 Sergey Rudenko

我在一些源文件中发现了这些类：.range-ios .range-bar，并试图通过.range-ios .range-bar {height：20px;}来玩这些类。所以它确实适用了变化，但是仍然适用于所有的范围... –

您只需创建一个类属性的元素，让你只能用相同的类名更改样式。

<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; 
    } 
}

因此，只有离子范围与类定制将具有高度：20像素，为他人使用默认高度。

您不能在青菜覆盖变量只有一个组成部分，因为它对抗萨斯变量，这意味着是全局设置的点。

来源

2017-08-28 02:29:03 VICTOR

嘿维克多 - 现在检查这个 –

不幸的是，这对离子不起作用。当我在括号内添加任何内容时，没有任何效果;（ –

基本上效果在那里，但是对于元素的一般“高度”而不是对吧 –

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

回答

相关问题