本来在简书找答案，找着找着没有很好解决我的问题，于是自己钻研了一下解决了toast样式的问题
解决的问题：1. 修改toast样式；2. 修改toast显示位置，只能上中下太局限了；3. 定义不同的显示颜色来调用，原来的黑色太丑来，而且只有一种颜色是不够的。
贴一下代码，帮还没碰到这个坑的看到这里小伙伴跳一下坑
//写在app.sass里面的样式，可以全局调用
//自定toast的颜色（error）
.error{
.toast-message{
color: #a94442;
}
.toast-wrapper {
background: #f2dede;
}
}
//自定toast的颜色（success）
.success{
.toast-message{
color: #3c763d;
}
.toast-wrapper {
background: #dff0d8;
}
}
//自定toast的颜色（success）
.tip{
.toast-message{
color: #31708f;
}
.toast-wrapper {
background: #d9edf7;
}
}
//修改toast出现的位置和显示的高
.toast-md .toast-wrapper.toast-top {
top: 47px;
height: 33px;
}
//前面两行是修改文字居中显示
//修改文字显示的字体大小和距离顶部高度
.toast-md .toast-message {
display:flex;
justify-content:center;
font-size: .8em;
padding-top: 8px;
}
上面的代码我修改了显示的样式，然后定义了三种显示的颜色方便调用，分别是出错，成功和普通提示，如果不喜欢我的颜色自行修改即可，
然后怎么使用这三种样式呢，在你定义的toast组件里面添加cssClass属性，写上上面的三种样式名字即可， 比如下面写的error，注意一下：我这里是基于position:top写的，所以position要给定为top，如果要显示middle，或者bottom可以根据我这改样式的方法重写
presentToast(messages) {
let toast = this.toastCtrl.create({
message: messages,
duration: 100000,
position: 'top',
cssClass: 'error'
});
toast.onDidDismiss(() => {
console.log('Dismissed toast');
// this.navCtrl.pop();
});
toast.present();
}
哈哈哈，toast是个大坑啊，只有个黑色不说，样式真丑，改一下海星，欢迎交流ionic。QQ：1216078547
网友评论