如何全局修改所有Ionic页面的padding默认值？

当然可以不用每个页面反复写那串style代码啦！Ionic本身就提供了很灵活的全局样式自定义方案，我给你整理了两种最实用的方法：

方法1：利用Ionic内置CSS变量（推荐） #

这是官方更推荐的方式，因为Ionic的组件样式大多靠CSS变量管控，ion-content的padding也对应了专门的变量。你只需要找到项目里的全局样式文件（一般是src/global.scss或者src/theme/variables.scss），添加这段代码：

ion-content {
  --padding-top: 5px;
  --padding-bottom: 5px;
  --padding-start: 5px;
  --padding-end: 5px;
}

这样所有带padding属性的ion-content都会自动应用这个值，而且你还能单独控制上下左右的padding，比直接写padding:5px灵活多了～

方法2：直接覆盖内置样式类 #

如果你想给所有加了padding属性的ion-content统一设置，或者更习惯直接写CSS规则，也可以在全局样式里这么写：

ion-content[padding] {
  padding: 5px;
}

这个选择器只会作用于添加了padding属性的ion-content，和你之前单独设置的场景完全匹配，而且不需要用!important就能覆盖默认样式。如果要针对所有ion-content（不管有没有加padding属性），可以去掉[padding]，必要时再加!important确保优先级：

ion-content {
  padding: 5px !important;
}

小提醒 #

修改完全局样式后，最好重启一下Ionic的开发服务，确保样式能正常生效哦！

内容的提问来源于stack exchange，提问作者Ali H