如何更改吐司的背景颜色

Question

我在项目中使用以下代码在我的newrecord.ts中添加了一个 toast

constructor(private toastCtrl: ToastController,
    private _listProduct : ListproductService,
    private _deleteProduct : DeleteProductService,
    public navCtrl: NavController,public navParams: NavParams,
    public loadingCtrl: LoadingController,
    private datePipe: DatePipe) {
        this.loading = this.loadingCtrl.create({
                            content: 'Please wait...'
                        });
        this.mytoast = this.toastCtrl.create({
                            message: 'Data loaded successfully',
                            duration: 3000,
                            position: 'top'
                        });
        this.initializeItems();
}

在ngOnInit()里面，我这样称呼我的祝酒词this.mytoast.present();

它工作得很好，但我可以用任何其他背景颜色代替黑色来代替我的吐司吗？

我已经阅读了cssClass属性，但我不知道如何使用它

Answer 1

您可以通过

覆盖variables.scss中的Ionic Sass Variables来定义另一种背景颜色

在toast背景的情况下，您可以定义例如white或#ffffff如下所示：

$toast-ios-background: #ffffff; // Apply for iOS
$toast-md-background: #ffffff; // Apply for Android
$toast-wp-background: white; // Apply for Windows

您可以在文档中找到可以覆盖的所有 sass 变量列表：

https://ionicframework.com/docs/theming/overriding-ionic-variables/

如果您想要更大的灵活性或设置其他样式，您可以使用 cssClass 选项为您的吐司设置custom css property

例如：

 this.mytoast = this.toastCtrl.create({
                        message: 'Data loaded successfully',
                        duration: 3000,
                        position: 'top',
                        cssClass: 'myCustomCss'
                    });

然后你可以在样式表中修改它，就像在app.component.scss

.myCustomCss {
    // The styles you would like to apply
 }

请参阅ToastController API 文档：

https://ionicframework.com/docs/api/components/toast/ToastController/

但是当它进入吐司的背景时，首先尝试使用变量;)