We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Isolated Css

When I try isolated Css with the Toast control, it does not work. I would like for isolated CSS to work.


I've attached my test page and the razor.css files

Attachment: Toast_cf0063b0.zip

3 Replies 1 reply marked as answer

VJ Vinitha Jeyakumar Syncfusion Team February 20, 2023 02:31 PM UTC

Hi Mike,

We want to let you know that we need to set Target to the Toast control to use the isolated CSS styles, since the Toast will be rendered in the body element when we didn't add any Target property, and then use the ::deep selector as like provided in the below code snippet. we have also prepared a sample for your reference.

Code snippet:
<div id='toast_target'></div>
    <SfToast ID="toast_default" @ref="ToastObj" Timeout="0" Title="File Downloading" Content="@ToastContent"
             ShowCloseButton="true" Target="#toast_target">
        <div id="toastBtnDefault" style="margin: auto; text-align: center">
            <SfButton @onclick="@ShowToast"> Show Toast </SfButton>
 ::deep .e-toast-container .e-toast .e-toast-message .e-toast-title {
            color: deepskyblue;
            font-size: 18px;
            font-weight: bold;
            text-align: center;


Attachment: ToastServer_326490ed.zip

MC Mike Chafin replied to Vinitha Jeyakumar February 20, 2023 11:01 PM UTC

That worked great. Thanks.

Marked as answer

VJ Vinitha Jeyakumar Syncfusion Team February 21, 2023 05:10 AM UTC

Hi Mike,

We are glad to assist you.


Live Chat Icon For mobile
Up arrow icon