1

I need to drop a simple LWC onto an existing Lightning Record page which just queries for some specific conditions between parent and child data, and if conditions are met, displays a toast message at the top of the lightning record page.

The Platform Show Toast Event LWC allows us to import lightning/platformShowToastEvent and then dispatch a ShowToastEvent with variants of info (gray), success (green), warning (orange), and error (red). This works as expected and the toast appears outside of the LWC, at the top of the record page. The documentation also says:

Toasts inherit styling from toasts in the Lightning Design System.

The Toast component blueprint within SLDS provides examples to create your own custom Toast within an LWC instead of firing the Toast event in Lightning.

It also has a section that discusses Custom CSS Properties as Styling Hooks to customize toast components with our own style.

However, I cannot figure out how/if it is possible to combine these two things together. My ideal solution would be an LWC that dispatches the ShowToastEvent to display a toast at the top of the page (not contained within the LWC itself), but have that Toast event use a custom background and text color.

So far it seems that I can either use ShowToastEvent, but only with one of the 4 color variants, or I can build my own custom toast within the LWC HTML which I can style colors on, but in that case, the toast will be contained within the boundaries of the LWC itself instead of prompting at the top of the record page.

Is there something I am missing, or are these the only two options that exist today?


Example Code:

MyToastComponent.html:

<template>
</template>

MyToastComponent.js:

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class KnowledgeCategoryNotice extends LightningElement {
    connectedCallback() {
        const toastEvent = new ShowToastEvent({
            title: 'Toast Title',
            message:
                'Toast Message',
            mode: 'sticky',
        });
        this.dispatchEvent(toastEvent);
    }
}

MyToastComponent.css:

.slds-notify_container {
    --slds-c-toast-color-background: purple; /* Does Not Work */
}

.slds-notify {
    --slds-c-toast-color-background: purple; /* Does Not Work */
}

.slds-notify_toast {
    --slds-c-toast-color-background: purple; /* Does Not Work */
}

1 Answer 1

2

You need to inspect the toast yourselves as the css variables could differ based on the toast variants. For example the success variant can be styled as follows.

--slds-g-color-success-base-50: purple;

It should be enough to define those in the lwc .css file, if not then you will have to load an external css file.

enter image description here

enter image description here

3
  • Thanks for your input. This works in dev console but doesn't work when I try to do it in the LWC's CSS. Unfortunately, our use case is not to always override the default color for info/warn/etc, it's just this one specific toast pop-up on this one specific lightning record page. So while it's true that we could do this with custom CSS loaded into a theme, that approach wouldn't work for what my company is asking me to do here. Commented Mar 15, 2023 at 16:25
  • 1
    developer.salesforce.com/docs/component-library/bundle/… use the loadStyle function, then it will work only when the specific lwc is in page.
    – Damecek
    Commented Mar 16, 2023 at 11:18
  • Worked perfectly, thanks! Commented Mar 16, 2023 at 16:01

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .