<p-toast>
的默认大小窗口很小,我希望能够调整它,因为我的 toast 消息可能很长。我还需要能够自定义 toast 窗口的样式,但我似乎无法让 CSS 正常工作。
this.messageService.addAll([
{key: 'tc', severity: 'info', summary: '30 Nov 2020', detail: 'Very very very long task message to display number one that user needs to see blah blah blah'},
{key: 'tc', severity: 'success', summary: '30 Nov 2020', detail: 'Very very very long task message to display number two that needs to be bigger and more prominent'}
]);
我已经根据文档尝试了几种方法。
内联 html
<p-toast position="top-center" width="90%" key="tc"></p-toast>
使用 ngStyle
<p-toast position="top-center" [ngStyle]="{ 'width': '90%' }" key="tc"></p-toast>
组件中的 CSS
@Component({
selector: 'task',
templateUrl: './task.component.html',
styleUrls: ['./task.component.css'],
styles: [`
:host ::ng-deep .custom-toast .ui-toast-message {
color: #ffffff;
width: 100%;
background: #FFD07B;
}` ],
providers: [MessageService]
})
<p-toast position="top-center" style="custom-toast" key="tc"></p-toast>
添加到 style.css
.custom-toast {
width: 90%;
background: #FFD07B;
}
:host ::ng-deep .custom-toast .ui-toast-message {
width: 90%;
background: #FFD07B;
}
<p-toast position="top-center" class="custom-toast" key="tc"></p-toast>
这些都不起作用。
我是不是在语法的某个地方犯了错误?如何调整 Toast 窗口的样式(颜色、字体,尤其是大小)?
编辑:这是一个 stackblitz link用我试过的所有东西。不确定我是否做对了。
最佳答案
经过一番折腾,终于找到了解决办法。我需要在 styles.css 中添加对 toast 容器的额外引用。
html 基本保持不变。
<p-toast class="custom-toast"></p-toast>
Styles.css 更改为添加对 toast 容器的引用。
// centers the toast window to the middle of the screen
.custom-toast .ui-toast {
position: fixed;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
width: 50%;
}
// adjusts font, color and other elements of the toast window if needed
.custom-toast .ui-toast-message-content {
font-family: 'Courier New', Courier, monospace;
background: #FFD07B;
}
关于css - 如何自定义Toast窗口的样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54376715/