Question

我在我的newrecord.ts

中使用以下代码在我的项目中添加了一个吐司

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

您可以通过覆盖Ionic Sass Variables

中的variables.scss来定义其他背景颜色

如果是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/

如果您希望获得更大的灵活性或设置其他样式，可以使用custom css property选项为您的祝酒词设置cssClass

例如：

 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/

但是当它转到吐司的背景时，首先尝试使用变量;）

如何更改吐司的背景颜色

1 个答案: