如何自定义Toast窗口的样式？

Question

<p-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链接，其中包含我尝试过的所有内容。不确定我是否做对了。

Answer 1

经过更多的修补，我终于找到了解决方案。我需要在 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;
}

Answer 2

您的“.ui-toast-message”类的类型为“display: block;”。 您首先需要将其更改为“display: flex;”

所以你的课程可能看起来像这样

:host ::ng-deep .custom-toast .ui-toast-message {
    display: flex;
    width: 500px; // whatever width you need
}

和你的角度代码

<p-toast position="top-center" class="custom-toast" key="tc"></p-toast>

编辑：工作示例StackBlitz

Answer 3

我遇到了同样的问题，请在您的代码中插入这样的样式

   <style>
        .ui.toast {
            width: 500px!important;
        }
    </style>

记住你所有的吐司都会有这个宽度，不使用时取出。

Answer 4

2024 年在这里。您可以在 styles.css 中简单地执行此操作：

.p-toast-消息 {

padding: 5px;
// do something for ALL messages
}

此外，此类将按严重性自动设置：

.p-toast-message-error {
   background-color: pink;
}

.p-toast-message-success {
   background-color: orange;
}

.p-toast-message-warning {
   background-color: black;
}

.p-toast-message-info {
   background-color: green;
}

顺便说一句，这是 primeng 的 toast.ts 的 github 文件（见第 ~46 行）；