为什么 Ionic 5 内容填充不起作用？

Question

当升级到 Ionic 5 时，padding 属性不再像 Ionic 4 那样工作：

<ion-content color="primary" padding></ion-content>

任何修复？

Answer 1

Ionic v4 中的故事：

在Ionic v4 中不推荐使用属性，如果您在开发者控制台中注意到，Ionic 4 会发出使用这些属性来设计样式的警告。

Ionic v5 中的故事：

在Ionic v5 中，这些属性被永久删除并替换为 CSS 类。因此，即使您的代码中存在这些属性，也不会有任何影响。

根据重大变化https://github.com/ionic-team/ionic/blob/v5.0.0/BREAKING.md#css：

我们最初为样式组件添加了 CSS 实用程序属性，因为它是一种快速简便的包装文本或向元素添加填充的方法。一旦我们添加了对多个框架的支持作为我们的“Ionic for Everyone” 方法的一部分，我们很快确定在使用 JSX 和 Typescript 的框架中使用 CSS 属性时存在问题。为了解决这个问题，我们添加了 CSS 类。与其在某些框架中支持 CSS 属性和在其他框架中支持 CSS 属性，我们决定移除 CSS 属性并支持所有这些属性，即类，以保持一致性。除此之外，更改为以 ion 为前缀的类可避免与本机属性和用户的 CSS 发生冲突。在最新版本的 Ionic 4 中，控制台打印了弃用警告以显示新类是什么，

解决方案：

您需要将所有属性替换为 CSS 类。例如：

前

<ion-header text-center></ion-header>
<ion-content padding></ion-content>

后

<ion-header class="ion-text-center"></ion-header>
<ion-content class="ion-padding"></ion-content>

对于您的情况，请更换

<ion-content color="primary" padding></ion-content>

到

<ion-content color="primary" class="ion-padding"></ion-content>

Answer 2

根据官方文档，您可以使用这些CSS自定义属性来设置ion-content组件的填充：

--padding-bottom 内容的底部填充

--padding-end 如果方向是从左到右，则右填充；如果方向是从右到左，则左填充

--padding-start 如果方向是从左到右，则左填充；如果方向是从右到左，则右填充

--padding-top 内容的顶部填充

在与您的组件关联的 SCSS 文件中，添加：

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

这应该在内容区域内添加填充。