SunEditor CSS Not Applied to HTML Rendered with dangerouslySetInnerHTML

When rendering HTML via dangerouslySetInnerHTML, the structure of the elements can end up being different from what the SunEditor component creates internally. The SunEditor component wraps its output with extra container elements and class names (e.g., a parent element with class "sun-editor") so that the CSS from suneditor.min.css applies properly.

To resolve your issue, try wrapping your injected HTML with the appropriate container class. For example, if the styles target elements under a container with the class "sun-editor", you can do:

JAVASCRIPTCopied
const Preview = () => {
    const location = useLocation();
    const data: blogDetailsType = location?.state;
    const sanitizedHtml = DOMPurify.sanitize(data?.blog_html);

    return (
        <div className="tw:text-primary text-responsive-sm tw:py-4">
            <div className="sun-editor" dangerouslySetInnerHTML={{ __html: sanitizedHtml }} />
        </div>
    );
};

export default Preview;

A few points to check:

1. Wrapper Elements: Ensure that the output HTML has the same wrapping structure or classes expected by suneditor.min.css. You can inspect the HTML produced by the <SunEditor /> component to see which class names or data attributes are present.

2. CSS Specificity & Order: If there are conflicting styles or if your local CSS is loaded after the SunEditor CSS, the rules may not apply as expected. Wrapping your HTML inside an element with the correct class helps increase the selector specificity.

3. Bundler / Import Order: Since you've imported the CSS in your component (import 'suneditor/dist/css/suneditor.min.css';), ensure that your build system (Webpack, Vite, etc.) is properly injecting these styles.

By wrapping your dynamically injected HTML in an element that matches the expected structure of the SunEditor component, you should be able to have the suneditor.min.css rules take effect.