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:
But this is how the page looks rendered on a web page:
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>
);
}
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:
But this is how the page looks rendered on a web page:
And this is the code I used to render that page in
pages/index.js