Styling dangerouslySetInnerHTML with Next.js

I’m looking into using Next.js with Ghost:

dangerouslySetInnerHTML is displaying but the styling is off. It goes beyond my container. Is there documentation on how to style {}? Is dangerouslySetInnerHTML the standard way of displaying post html?

You should style the content with CSS. Next.js has built-in CSS support.

1 Like

Hey @minimaluminium,

Thanks for the reply.

Here’s my code example:

    <h1> this-turns-red </h1>
    <div dangerouslySetInnerHTML={{ __html: }} />

  <style jsx>{`
    h1 {
      color: red;

The text “this-turns-red” is red but the html inside dangerouslySetInnerHTML is still not styled. Do you have an example on how to style dangerouslySetInnerHTML?

Hi! You can style it like this.

div {

div h2 {

There are some base content styles here which you can try out that might get you going in the right direction, you’d just need to set class="gh-canvas gh-content" on the container div