Ionic 4中HTML属性color='primary'对应的等效SCSS全局设置方法

解决方案 #

你之前的写法失效是因为Ionic组件通过Shadow DOM封装了内部样式，直接给ion-toolbar设置background、color属性无法作用到内部结构，优先级也低于组件内置样式。直接修改Ionic官方暴露的组件级CSS自定义属性即可实现全局生效，效果和手动给ion-toolbar加color="primary"完全一致。

在global.scss中添加以下代码即可：

ion-toolbar {
  /* 工具栏背景色 */
  --background: var(--ion-color-primary);
  /* 工具栏默认文本颜色 */
  --color: var(--ion-color-primary-contrast);
  /* 可选：统一工具栏内按钮、图标等组件的默认颜色，避免出现元素颜色不匹配的问题 */
  --ion-color-base: var(--ion-color-primary-contrast);
}

如果需要区分不同平台的样式，可以按平台单独配置：

/* 仅iOS模式生效 */
.ios ion-toolbar {
  --background: var(--ion-color-primary);
  --color: var(--ion-color-primary-contrast);
}

/* 仅安卓Material Design模式生效 */
.md ion-toolbar {
  --background: var(--ion-color-primary);
  --color: var(--ion-color-primary-contrast);
}

配置完成后所有未单独指定color属性的工具栏都会自动应用主色样式，个别需要自定义颜色的页面仍然可以通过手动加color属性覆盖全局配置，不会发生冲突。

内容的提问来源于stack exchange，提问作者Jakub Szlaur