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

Style tag not rendering and styles are not getting applied

Hey there, we are currently using the rich text editor and give html value as its input using the bindvalue attribute. the preview works fine but the editor is not able to pick up the <style> tag and the styles inside them 

Example, this does not work, I don't  get the css applied to the text, but inline css works . 

<p class = "test"> Test</p>


test {

  color: blue;



it would be great if I could get your assistance



4 Replies

VY Vinothkumar Yuvaraj Syncfusion Team March 7, 2023 03:42 PM UTC

Hi Ym,

To resolve this issue, you can add the dot to the class style in the <style> tag. Here is an example of the code you can use:


    .test {

        color: blue;



Please let us know if you have any further questions or concerns.



Attachment: BlazorApp1_96dcff75_9ae42545.zip

YM ym March 7, 2023 03:45 PM UTC

Sorry that was a typo. I do have the dot present there . 

YM ym March 7, 2023 03:48 PM UTC

We are actually using a markdown editor with two editors 1 for markdown and the other for preview . when we try to add raw html in the markdown editor it works for most cases but not for the style tag 

we convert the markdown to html and feed it to the preview window. this ignores the style tags completely . 

I also tested out the demo on your page and it does not seem to work - https://blazor.syncfusion.com/demos/rich-text-editor/markdown-overview?theme=bootstrap4

VY Vinothkumar Yuvaraj Syncfusion Team March 8, 2023 05:45 PM UTC

Hi Ym,

To resolve this issue, we recommend setting the EnableHtmlSanitizer property to false into preview, which will allow you to add raw HTML and ensure that the styles are properly applied in the preview. Please note that by default, EnableHtmlSanitizer is set to true to avoid cross-scripting site attacks.

To implement this solution, please use the following code:

<SfRichTextEditor EnableHtmlSanitizer="false>


We have also attached a sample for your reference. You can find more information about EnableHtmlSanitizer in our API documentation, which is available at this link: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_EnableHtmlSanitizer

If you prefer not to disable the EnableHtmlSanitizer property for the preview, you can always add your styles into the application end.



Attachment: BlazorApp1_eceaa08c_e6ccb018.zip

Live Chat Icon For mobile
Up arrow icon