有没有办法在 ionic 2 toast 中设置文本消息的样式？
我试过这个：
let toast = Toast.create({
message: "Some text on one line. <br /><br /> Some text on another line.",
duration: 15000,
showCloseButton: true,
closeButtonText: 'Got it!',
dismissOnPageChange: true
});
toast.onDismiss(() => {
console.log('Dismissed toast');
});
this.nav.present(toast);
}但显然你不能在文本中使用 html，所以我猜我的问题的答案是否定的？
【问题讨论】：
您必须在 toastCtrl 函数中添加 'cssClass: "yourCssClassName"'。
let toast = Toast.create({
message: "Some text on one line. <br /><br /> Some text on another line.",
duration: 15000,
showCloseButton: true,
closeButtonText: 'Got it!',
dismissOnPageChange: true,
cssClass: "yourCssClassName",
});
您可以向您的 css 类添加任何功能。但是您的 css 功能超出了默认页面的 css。例：
page-your.page.scss.name {
//bla bla
}
.yourCssClassName {
text-align:center;
}
【讨论】：
<br /> 不起作用。
!important到text-align:center才能生效：text-align: center !important;否则不起作用！
我能够通过在烤面包机创建上添加自定义类来实现烤面包机颜色变化
let toast = this.toastCtrl.create({
message: 'Foobar was successfully added.',
duration: 5000,
cssClass: "toast-success"
});
toast.present();
}
在那个页面 scss 文件中，然后我超出了默认的嵌套页面名称（因为烤面包机 NOT 在 ion 页面名称的根目录内）。尽管这有点 hacky，但我只是在我添加的自定义类之后明确定位了下一个 div 元素
.toast-success {
> div{
background-color:#32db64!important;
}
}
我说它很hacky，因为你必须在上面使用!important。您可以通过用.md,.ios,.wp{... 包装.toast-success 来避免！重要
您可以通过覆盖theme/variables.scss 文件中的主要烤面包机变量来覆盖样式默认值。
$toast-ios-background:(#32db64);
$toast-md-background:(#32db64);
$toast-wp-background:(#32db64);
这只会覆盖默认值，而不是自定义值。还有一些变量可以设置样式。
【讨论】：
.toast-message 类中定义的 background-color 才能看到自定义 cssClass 背景。
首先，从ionic-angular 导入 toast 控制器，并在构造函数中创建它的对象。
import { ToastController } from "ionic-angular";
constructor(private _tc: ToastController) {
}
之后，无论你想在哪里显示你的 toast 消息，都写下。
let options = {
message: "Your toast message show here",
duration: 3000,
cssClass: "toast.scss"
};
this._tc.create(options).present();
这是我的 scss：
.toast-message {
text-align: center;
}
或者您可以查看此link 中的最佳示例。我想它会对你有所帮助。 :)
或者检查这个link的答案。
【讨论】：
如果你在 app.scss 中定义了自己的 css 类（不在 page.scss 中）
您可以使用 .toast-wrapper 和 .toast.message 对其进行样式设置
不用> div{
例子：
.yourtoastclass {
.toast-wrapper {
background: blue;
opacity: 0.8;
border-radius: 5px;
text-align: center;
}
.toast-message {
font-size: 3.0rem;
color: white;
}
}
可以在 theme/variables.scss 中设置默认值
示例（红色和小透明）：
$toast-width: 75%; /* default 100% */
$toast-ios-background: rgba(153, 0, 0, .8);
$toast-md-background: rgba(153, 0, 0, 0.8);
【讨论】：
border-radius: 5px; 和text-align: center;？以及我们如何对齐 toast 以显示到屏幕中心（当宽度不是 100% 时）？
Ionic 2 提供了一种非常有用的方法来覆盖其组件样式，您可以通过添加
来覆盖 src/theme/variables.scss 中的烤面包机 SASS 变量$toast-ios-title-color: #f00 ;
$toast-md-title-color:#f00;
这会覆盖默认样式请参考Overriding Ionic Sass variable
【讨论】：
你可以完成，但是你需要修改toast组件模板本身。
通过资源管理器： \node_modules\ionic-angular\components\toast\toast.js
更改第 194 行（模板）：
{{d.message}} 到 <div [innerHTML]='d.message'></div>
【讨论】：
您应该能够使用 .toast-message 选择器更改 css 中的任何消息样式：
.toast-message {
font-family: Helvetica,
color: red
}
或者，如果您查看文档 (http://ionicframework.com/docs/v2/api/components/toast/Toast/)，您可以使用一个 cssClass 属性来为您的 toast 分配一个特定的类，然后设置它的样式。
【讨论】：
更改 toast 背景颜色和不透明度：
let toast = this.toastCtrl.create({
message: msg,
duration: 3000,
position: 'bottom',
cssClass: 'changeToast'
});
并添加app.scss:
.changeToast{.toast-wrapper {opacity: 0.6; border-radius: 5px !important; text-align: center; background: color($colors, primary);}};
与.toast-message一起使用
【讨论】：
以上方法我都试过了，还是不行，所以我遇到了一个新的解决方案，你需要在页面css声明之外的cssClass：
let toast = this.toastCtrl.create({
message: msg,
duration: 3000,
position: 'bottom',
cssClass: 'toastcolor'
});
post-list.scss 像这样
page-post-list {
}
.toastcolor .toast-message {
background-color:skyblue;
}
【讨论】：
不确定旧的 Ionic 版本，但在 Ionic 5 中，您无法直接更改内部 CSS，因为它被封装在阴影中
<ion-select>
#shadow-root
<div class="toast-container" part="container">
...
</div>
</ion-select>
因此，要更改 cssClass 中的 .toast-container（例如），您应该使用：
.my-custom-class::part(container) {
flex-direction: column;
}
.my-custom-class {
.toast-container {
flex-direction: column; // will not work
}
}
【讨论】：