为组件使用自定义颜色：离子范围答案

【问题标题】：Use custom color for component: ion-range为组件使用自定义颜色：离子范围
【发布时间】：2018-07-21 10:47:12
【问题描述】：

我想为组件使用自定义颜色：ion-range。

https://ionicframework.com/docs/api/components/range/Range/

我尝试如下设置颜色#ff0000，但没有成功。

<ion-list>
    <ion-item>
        <ion-range color="#ff0000" min="0" max="120" step="0.1" pin="true" [(ngModel)]="myValue">
            <ion-icon range-left small name="contrast"></ion-icon>
            <ion-icon range-right name="contrast"></ion-icon>
        </ion-range>
    </ion-item>
</ion-list>

知道如何实现这一目标吗？

谢谢。

【问题讨论】：

您需要设置它的样式以覆盖 SASS 变量，如下所述：ionicframework.com/docs/theming/overriding-ionic-variables。您可以使用您提供的链接找出您需要的变量。只需创建 variables.scss 文件并将具有相同名称的变量放在那里。确保它遵循离子风格声明。

标签： angular typescript ionic-framework ionic2 ionic3

【解决方案1】：

您可以在 src/theme/variables.scss 中添加自定义颜色
示例

$colors: (
  primary:    #488aff,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,
  custGreen :     #16e06d
);

然后你可以使用：
ion-range color="custGreen"

【讨论】：