如何在 ionic 4 中提供警报控制器 css?
Posted
技术标签:
【中文标题】如何在 ionic 4 中提供警报控制器 css?【英文标题】:how to give Alert Controller css in ionic 4? 【发布时间】:2019-09-05 08:20:52 【问题描述】:我想在 ionic 4 中提供警报控制器样式。这是我的演示代码,
async presentalert()
const alert = await this.alertCtrl.create(
header: ' DO YOU WANT TO CANCEL',
message: 'DO YOU WANT TO CANCEL',
cssClass: 'alertCancel',
mode: 'ios',
buttons: [
text: 'NO',
role: 'cancel',
cssClass: 'alertButton',
handler: () =>
console.log('Confirm Cancel');
,
text: 'YES',
cssClass: 'alertButton',
handler: () =>
console.log('Confirm Okay');
]
)
await alert.present();
我尝试在 global.scss 中应用 scss
.alertCancel
--background: red;
.alertButton
background-color: white !important;
我已经尝试了所有可能的方法来在警报控制器中提供 css,但它不起作用所以请帮助我,我被困在这里。
【问题讨论】:
【参考方案1】:我遇到了同样的问题,这对我有用,无需使用“!important” 在 variables.scss 我添加了这个:
@media (prefers-color-scheme: light)
body
--ion-background-color: rgb(240, 248, 240);
ion-alert
--ion-background-color: #ffffff;
这允许为应用程序的背景设置通用颜色,但会为每个警报更改它(在这种情况下,在浅色主题上):)
【讨论】:
【参考方案2】:如果您希望使用定义的 cssClass 而不是组件 ion-alert 来设置警报样式,请将以下代码添加到您的 variables.scss
.alertCancel
--background: red;
button.alertButton
color: white;
结果
因为,ion-alert 不提供CSS Custom Properties 来设置警报按钮的样式。当您也想设置警报按钮的样式时,我建议您使用定义的 cssClass 来设置警报的样式,而不是 ion-alert。
【讨论】:
【参考方案3】:--background
是组件ion-alert
的css变量,所以在variables.scss
中做如下操作
ion-alert
--background: red !important;
供参考:
https://ionicframework.com/docs/theming/css-variables#ionic-variables
【讨论】:
我想在 alertbox 中添加 textarea 以便您帮我解决。 您想在警报的哪个位置添加它?我不认为您可以添加文本区域,您可以根据需要添加消息、子标题和标题 是的,我需要用它在 textarea 中添加 cmets。 如何在toast
中设置toast-content
的最大宽度?
第二个链接失效了以上是关于如何在 ionic 4 中提供警报控制器 css?的主要内容,如果未能解决你的问题,请参考以下文章