Overriding styles in the default Blazor theme

[Aron Ko]

Hi. Can you please tell me how to override your blazor theme or how to add my own css styles? For example, I would like to make a frame with round corners in RichTextEditor or make some button with my animation. I tried using CssClass="custom" from the documentation and it can only change the background. Many thanks.

Attachment: Screenshot_2_2ed8784b.zip

[Vinitha Jeyakumar]

Hi Aron Ko,

We have prepared a sample as per your request to achieve rounded corners for the RichTextEditor by customizing and overriding the CSS styles. Please check the code and sample below,

Code snippet:

<SfRichTextEditor CssClass="custom">

    

</SfRichTextEditor>

<style>

    .custom.e-richtexteditor.e-rte-tb-expand .e-rte-content, .e-richtexteditor.e-rte-tb-expand .e-source-content {

    border-radius: 20px;

    margin-top: 10px !important;

    border: 1px solid #dee2e6 !important;

    }

    .custom.e-richtexteditor {

    border: none !important;

    }

    .e-toolbar .e-toolbar-items {

    border-radius: 20px ;

    }

    .custom.e-richtexteditor .e-rte-toolbar.e-control[class*=e-toolbar], .e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar.e-control[class*=e-toolbar] {

    border-radius: 20px !important;

    border: 1px solid #dee2e6;

    }

    </style>

Sample: https://blazorplayground.syncfusion.com/htVUijUshLsNmwhg

Regards,

Vinitha

[Aron Ko]

Thanks for the support. It works. You're the best.

[Vinitha Jeyakumar]

Hi Aron Ko,

We are glad to assist you.

Regards,

Vinitha