为Ionic单个组件修改Sass变量的方法咨询

我之前也碰到过一模一样的问题！直接在组件的.scss文件里覆盖$label-md-text-color-focused这类变量根本没用，核心原因是Ionic的全局主题变量是在variables.scss里统一编译成CSS样式的，组件的局部样式文件是在全局编译之后才处理的，局部的Sass变量不会回溯影响已经生成的全局样式。

给你几个亲测有效的解决办法，按推荐程度排序：

方法一：用Ionic内置的CSS变量（最推荐，适用于Ionic 4+） #

Ionic 4及以后的版本大量使用CSS自定义属性（变量）来控制样式，不需要修改Sass变量就能轻松定制单个组件。对于浮动标签的聚焦颜色，对应的CSS变量是--label-text-color-focused，直接在组件的.scss文件里这么写：

:host {
  --label-text-color-focused: red;
}

:host选择器会把样式作用于当前组件的宿主元素，这样只有这个组件里的浮动标签在聚焦时会变成红色，完全不会影响其他组件。

方法二：给组件加自定义类，覆盖具体CSS选择器 #

如果你的Ionic版本比较老，或者某些样式没有对应的CSS变量，可以给目标组件加一个自定义类，然后在组件.scss里直接覆盖对应的类选择器：

首先在组件模板里给ion-input（或者你用的带浮动标签的组件）加类：

<ion-input class="red-float-label" label="Username" label-placement="floating"></ion-input>

然后在组件.scss里写：

.red-float-label {
  // 针对MD模式下聚焦的浮动标签
  &.md .label.label-floating.label-focused {
    color: red !important;
  }

  // 如果还要兼容iOS模式，加上下面这段
  &.ios .label.label-floating.label-focused {
    color: red !important;
  }
}

这里的!important是为了确保覆盖掉全局的样式，如果你发现不加也能生效就可以去掉。

方法三：全局层面定义不同主题类（适合批量组件复用） #

如果有多个组件需要用同一种自定义浮动标签样式，可以在variables.scss里定义不同的主题类，然后给对应的组件或父容器加类：

在variables.scss里添加：

// 红色浮动标签主题
.red-float-label-theme {
  $label-md-text-color-focused: red;
  $label-ios-text-color-focused: red;
  // 调用Ionic的组件混合宏，生成对应的样式
  @include ionic-components();
}

// 蓝色浮动标签主题
.blue-float-label-theme {
  $label-md-text-color-focused: blue;
  $label-ios-text-color-focused: blue;
  @include ionic-components();
}

然后在组件模板里给父容器或者组件本身加这个类：

<div class="red-float-label-theme">
  <ion-input label="Username" label-placement="floating"></ion-input>
</div>

这种方法需要注意，要确保这些主题类的代码放在variables.scss里@include ionic-global();之后，不然可能不会生效。

最后提醒一下：组件的.scss文件默认开启了ViewEncapsulation，所以尽量用:host或者自定义类的方式，避免用::ng-deep这类穿透封装的选择器（虽然也能用，但可能会带来样式污染的问题）。如果不确定对应的CSS变量或选择器是什么，可以用浏览器的开发者工具，选中浮动标签元素，查看它的样式和对应的变量~

内容的提问来源于stack exchange，提问作者Omar Bahir