# Styling dangerouslySetInnerHTML with Next.js

**URL:** <https://forum.ghost.org/t/styling-dangerouslysetinnerhtml-with-next-js/11916>\
**Category:** Developer help\
**Created:** [February 11, 2020, 2:37am UTC](https://forum.ghost.org/t/styling-dangerouslysetinnerhtml-with-next-js/11916 "2020-02-11T02:37:21Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![leon123](https://avatars.discourse-cdn.com/v4/letter/l/f475e1/32.png) [@leon123](https://forum.ghost.org/u/leon123)\
**Post date:** [February 11, 2020, 2:37am UTC](https://forum.ghost.org/t/styling-dangerouslysetinnerhtml-with-next-js/11916/1 "2020-02-11T02:37:21Z")

</div>

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

> **[Build A Custom JavaScript App With Headless Ghost + Next.js](https://ghost.org/docs/jamstack/next/)**
>
> Power your server-side application with Ghost and build a completely custom front-end with the Next.js React framework!

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?

 ![](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/2X/4/418a4fcfd796ccd1b9c59e85040a91b6122112ee.jpeg)

---

<div class="post-metadata">

**Author:** ![minimaluminium](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/minimaluminium/32/2652_2.png) [@minimaluminium](https://forum.ghost.org/u/minimaluminium)\
**Post date:** [February 11, 2020, 7:30am UTC](https://forum.ghost.org/t/styling-dangerouslysetinnerhtml-with-next-js/11916/2 "2020-02-11T07:30:24Z")

</div>

You should style the content with CSS. Next.js has built-in CSS support. [Basic Features: Built-in CSS Support | Next.js](https://nextjs.org/docs/basic-features/built-in-css-support)

---

<div class="post-metadata">

**Author:** ![leon123](https://avatars.discourse-cdn.com/v4/letter/l/f475e1/32.png) [@leon123](https://forum.ghost.org/u/leon123)\
**Post date:** [February 11, 2020, 7:39pm UTC](https://forum.ghost.org/t/styling-dangerouslysetinnerhtml-with-next-js/11916/3 "2020-02-11T19:39:19Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![minimaluminium](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/minimaluminium/32/2652_2.png) [@minimaluminium](https://forum.ghost.org/u/minimaluminium)\
**Post date:** [February 12, 2020, 3:50am UTC](https://forum.ghost.org/t/styling-dangerouslysetinnerhtml-with-next-js/11916/4 "2020-02-12T03:50:43Z")

</div>

Hi! You can style it like this.

```auto
div {
    ...
}

div h2 {
    ...
}

```

---

<div class="post-metadata">

**Author:** ![John](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/john/32/29288_2.png) [@John](https://forum.ghost.org/u/John)\
**Post date:** [February 12, 2020, 7:34am UTC](https://forum.ghost.org/t/styling-dangerouslysetinnerhtml-with-next-js/11916/5 "2020-02-12T07:34:16Z")

</div>

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

> <https://github.com/TryGhost/Starter/blob/main/assets/css/ghost/content.css>