Styling

How it works?

By default the library does not import any styling. Each block is rendered with custom classes prefixed with notion- and followed with the properties of the block (eg. notion-callout) that you can style with your own theme.

Importing Notion Theme

The library is shipped with a theme that tries to replicate the Notion style.

You can simply import it in your app:

@import "@notion-render/client/sass/index.css";

⚠️

Make sure to wrap rendered content inside a

block.

Paragraphs

In Notion, line breaks result in empty paragraph blocks instead of
. This behaviour could lead into spacing not reflected on your frontend. To avoid this issue, you should add a min-height to your paragraphs:

p {
	min-height: 2em;
}

Colors

In Notion it is possible to change the color of a block between the following one:

• Default (means no color)
• Blue
• Red
• Yellow
• Gray
• Brown
• Orange
• Green
• Purple
• Pink

ℹ️

The “Background color” changes the color of the block where the “Color” changes the color of the paragraph.