splitbee/react-notion

Allow styled links

suzm10 opened this issue · 1 comments

suzm10 commented

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

I just needed to import the css styles.