Как настроить стиль окна Toast? ⇐ CSS

[Anonymous]

Размер окна
по умолчанию очень мал, и мне хотелось бы иметь возможность его настроить, поскольку мои всплывающие сообщения могут быть очень длинными. Мне также нужна возможность настроить стиль всплывающего окна, но я не могу заставить 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'}
]);

Я попробовал несколько методов, основанных на документации.

inline html

Код: Выделить всё

с использованием ngStyle[/b]

Код: Выделить всё

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]
})

добавление в style.css

Код: Выделить всё

.custom-toast {
width: 90%;
background: #FFD07B;
}

:host ::ng-deep .custom-toast .ui-toast-message {
width: 90%;
background: #FFD07B;
}

ничего из этого не сработало.

Допустил ли я ошибку где-то в синтаксисе? Как именно настроить стиль (цвет, шрифт, особенно размеры) окна Toast?

РЕДАКТИРОВАТЬ: Вот ссылка на stackblitz со всем, что у меня есть. пытался. Не уверен, правильно ли я это сделал.

Подробнее здесь: https://stackoverflow.com/questions/543 ... ast-window