Styles like Notion dont works

[Nahuel Luca]

Hello i have a littler problem with de styles. I have this files:

import {NotionRenderer} from "@notion-render/client";
import {notFound} from "next/navigation";
//Plugins
import hljsPlugin from "@notion-render/hljs-plugin";
import bookmarkPlugin from "@notion-render/bookmark-plugin";

import {getPageContent, getPageBySlug, notionClient} from "@/utils/notion";
import Post from "@/components/post";

export default async function page({params}: {params: {slug: string}}) {
  const post = await getPageBySlug(params.slug);

  //Redirect to not found page!
  if (!post) notFound();

  const content = await getPageContent(post.id);

  const notionRenderer = new NotionRenderer({
    client: notionClient,
  });

  notionRenderer.use(hljsPlugin({}));
  notionRenderer.use(bookmarkPlugin(undefined));
  const html = await notionRenderer.render(...content);

  return (
    <Post
      bannerImage={(post.properties.BannerImage as any).url}
      content={html}
      title={(post.properties.Title as any).title[0].plain_text}
    />
  );
}

But the styles like notion dont work

[KARBOU Aristide]

I have the same problem

[Nahuel Luca]

Hey, the problem can be solved with highlight.js. I put this line in the global.css file: @import "highlight.js/styles/monokai.css";

It doesn't solve the problem entirely but it's something.

[Phil]

this worked for me:

@import 'node_modules/@notion-render/client/dist/theme.css';

and add the class here:

<div className="notion-render" dangerouslySetInnerHTML={{ __html: html }}></div>

[Tunde Williams]

The styles still don't work. In the tutorial, it says: @import '@notion-render/client/index.css'; but this module can't be found. Does anyone have a solution for this?

[Nahuel Luca]

Try with use a tailwindcss-typography and highlight.js