如何在 ionic 3+ 中更改单个页面的背景颜色答案

【问题标题】：How to change the background color of a single page in ionic 3+如何在 ionic 3+ 中更改单个页面的背景颜色
【发布时间】：2019-06-14 04:07:38
【问题描述】：

我是 ionic 新手，我一直在尝试更改单页 css，例如将背景颜色更改为其他颜色。喜欢绿色左右。我知道我可以在全球范围内更改相同的内容，并且我不想在全球范围内更改背景颜色，我希望它只在这个单一页面上。

我尝试了以下方法，但似乎不起作用。

我尝试过搜索，但没有找到适合我需要的东西

//页面源代码

<ion-content class="contents">
     sample text goes here 
</ion-content>

.contents{
  background-color:red;
}
ion-content{
  --background-color: var(--ion-color-danger, #f1453d);
}

背景应该给我该页面的红色，但它不会影响更改

【问题讨论】：

【解决方案1】：

试试这个。

.contents {
  background: #f1453d;
}

【讨论】：

仍然不适合我@Hecham....我已经尝试过背景颜色：#f1453d !important;我有什么遗漏的吗
@Nazehs 这在我的项目中工作。你能重现问题stackblitz.com/edit/ionic-9rmjck?file=pages%2Fhome%2Fhome.html
@sudarshana，我只是发现有一个 CSS 正在禁用我的 CSS，我已经用我的控制台的 sn-p 更新了我的帖子。如果我禁用它，它将应用我的 css，但现在的问题是在我的应用程序上找到该 css 的位置以进行必要的更改

【解决方案2】：

你必须在 page.scss 上试试这个代码

ion-content {background: #f1453d !important; }

【讨论】：

【解决方案3】：

我遇到了这个问题并尝试了这里提到的所有解决方案，最后通过这个解决了：

<ion-content style="--background: #f1453d;">

【讨论】：

【解决方案4】：

在 ionic v6 Beta1 中，这对我有用：

ion-content {
  --ion-background-color: red;
}

【讨论】：