DEV Community

Cover image for Why CSS Classes Don’t Work with dangerouslySetInnerHTML in Next.js (and How to Fix It)
Zain Muhammad
Zain Muhammad

Posted on

Why CSS Classes Don’t Work with dangerouslySetInnerHTML in Next.js (and How to Fix It)

#react #nextjs #webdev #css

When working with SEO-driven or CMS-based content in React / Next.js, we often rely on

dangerouslySetInnerHTML to render HTML strings.

Everything looks fine… until you add CSS classes inside the HTML content and realize:

❌ Styles are not being applied at all.

Let’s break down why this happens and how to fix it properly.

🧩 The Problem

Example content:

ts

const content = `
  You can consult <span class="highlight">certified nutritionists</span>
  from home.
`;
Enter fullscreen mode Exit fullscreen mode

Rendered like this:

tsx

<p dangerouslySetInnerHTML={{ __html: content }} />
Enter fullscreen mode Exit fullscreen mode

And styled using styled-jsx:

tsx

<style jsx>{`
  .highlight {
    color: #0a7cff;
    font-weight: 600;
  }
`}</style>
Enter fullscreen mode Exit fullscreen mode

❌ Result

The .highlight styles do not apply.

🤔 Why This Happens

Next.js uses styled-jsx, which scopes CSS to JSX-rendered elements.

However:
HTML injected via dangerouslySetInnerHTML is outside the styled-jsx scope
So class selectors like:

css

.highlight { ... }
Enter fullscreen mode Exit fullscreen mode

get transformed into:
css

.highlight.jsx-123456 { ... }
Enter fullscreen mode Exit fullscreen mode

But your injected HTML doesn’t receive that hash, so styles never match.

✅ Solution (Recommended): Use :global() in styled-jsx

Wrap your class selectors with :global().

tsx

<style jsx>{`
  :global(.highlight) {
    color: #0a7cff;
    font-weight: 600;
  }

  :global(.link) {
    color: #0070f3;
    text-decoration: underline;
  }
`}</style>
Enter fullscreen mode Exit fullscreen mode

✅ Now your injected HTML works correctly.

Top comments (0)