Ionic中如何编写全局生效CSS并在ionChange等事件中动态修改元素样式

以下两种实现方式均可满足样式全局生效的需求： #

方案一：CSS变量实现（更灵活，适合少量样式动态修改） #

步骤1：全局定义CSS变量和目标样式 #

打开项目src/theme/global.scss全局样式文件，添加以下代码：

// 全局根变量定义
:root {
  --custom-text-color: #333; // 默认文字色
  --custom-bg-color: #fff; // 默认背景色
}

// 需要全局生效的指定class样式
.target-class {
  color: var(--custom-text-color);
  background-color: var(--custom-bg-color);
}

// 需要全局生效的指定ID样式
#target-id {
  color: var(--custom-text-color);
  background-color: var(--custom-bg-color);
}

步骤2：编写onChange事件逻辑 #

在对应页面的ts文件中添加处理函数：

onChange(event: any) {
  const selectVal = event.detail.value;
  const rootElement = document.documentElement;

  if (selectVal === 'pink') {
    rootElement.style.setProperty('--custom-text-color', '#fff');
    rootElement.style.setProperty('--custom-bg-color', '#ec4899');
  } else if (selectVal === 'green') {
    rootElement.style.setProperty('--custom-text-color', '#fff');
    rootElement.style.setProperty('--custom-bg-color', '#22c55e');
  }
}

方案二：全局类名切换（适合多样式批量修改） #

步骤1：全局预设主题样式 #

在src/theme/global.scss中添加不同主题的样式规则：

// pink主题下的全局样式
body.theme-pink .target-class,
body.theme-pink #target-id {
  color: #fff;
  background-color: #ec4899;
  /* 可按需添加更多CSS规则 */
}

// green主题下的全局样式
body.theme-green .target-class,
body.theme-green #target-id {
  color: #fff;
  background-color: #22c55e;
  /* 可按需添加更多CSS规则 */
}

步骤2：编写onChange事件逻辑 #

在对应页面的ts文件中添加处理函数，切换body标签的类名即可：

onChange(event: any) {
  const selectVal = event.detail.value;
  const bodyEl = document.body;
  // 先移除所有已存在的主题类
  bodyEl.classList.remove('theme-pink', 'theme-green');
  // 添加当前选中的主题类
  bodyEl.classList.add(`theme-${selectVal}`);
}

注意事项 #

• 所有需要全局生效的CSS规则必须写在global.scss中，不可写在单个页面的组件样式文件内，组件样式默认有作用域隔离，仅在当前组件生效。
• 如果需要修改Ionic内置组件的样式，直接在global.scss中写对应选择器即可生效，无需额外样式穿透语法。

内容的提问来源于stack exchange，提问作者ziad kh