Styling dangerouslySetInnerHTML with Next.js

Developer help
1

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 {props.post.html}? Is dangerouslySetInnerHTML the standard way of displaying post html?

1725×1190 573 KB

2

You should style the content with CSS. Next.js has built-in CSS support. Basic Features: Built-in CSS Support | Next.js

1 Like
3

Hey @minimaluminium,

Thanks for the reply.

Here’s my code example:

<React.Fragment>
    <h1> this-turns-red </h1>
    <div dangerouslySetInnerHTML={{ __html: props.post.html }} />

  <style jsx>{`
    h1 {
      color: red;
    }
  `}</style>
</React.Fragment>

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?

4

Hi! You can style it like this.

div {
    ...
}

div h2 {
    ...
}
5

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

1 Like