splitbee / react-notion

A fast React renderer for Notion pages
https://react-notion.com
MIT License
2.85k stars 149 forks source link

Allow styled links #96

Closed suzanmanasreh closed 2 years ago

suzanmanasreh commented 2 years ago

Currently, when I use the component to render content from a notion page and there's a link on that page, the link doesn't get displayed with the same styling that it has in notion. Like, the underlines disappear on the web page and it's all the same color, so users can't tell there's a link there. Is there a way to enable links to have different styling than plain text, or has that not been implemented yet?

For example, this is what a page looks like in notion:

image

But this is how the page looks rendered on a web page:

image

And this is the code I used to render that page in pages/index.js

import { NotionRenderer } from "react-notion";
import Head from "next/head";
import fetch from "node-fetch";

export async function getStaticProps() {
  const data = await fetch(
    "https://notion-api.splitbee.io/v1/page/399efa86bc1b4dcdb5a1dd2cb6af2458"
  ).then((res) => res.json());

  return {
    props: {
      blockMap: data,
    },
    revalidate: 1,
  };
}

export default function Home({ blockMap }) {
  return (
    <div>
      <Head>
        <style>{`body { margin: 0;}`}</style>
        <title>react-notion example</title>
      </Head>
      <NotionRenderer blockMap={blockMap} />
    </div>
  );
}
suzanmanasreh commented 2 years ago

I just needed to import the css styles.