我正在尝试制作一个具有 Treeviz 依赖项的 Web 应用程序。目标是在树的每个节点上放置一个弹出按钮，如果用户单击该按钮，他/她可以看到该节点的描述，并且之后应该可以编辑。我尝试了很多方法，但对我来说，弹出窗口在 React 中不起作用。
有一个我想做的例子。你可以看到我必须将 React 组件插入 HTML，因为我正在使用 renderToString。您只需查看树的 renderNode 属性即可。我引用 renderNode 中的 React 组件，例如：${tooltip} ${popover}。
import React from "react";
import { TreevizReact } from "treeviz-react";
import { renderToString } from "react-dom/server";
const data_1 = [
{
id: 1,
text_1: "Chaos",
description: "Void",
father: null,
color: "#FF5722"
},
{
id: 2,
text_1: "Tartarus",
description: "Abyss",
father: 1,
color: "#FFC107"
},
{ id: 3, text_1: "Gaia", description: "Earth", father: 1, color: "#8BC34A" },
{ id: 4, text_1: "Eros", …我想在我的 NextJS 应用程序中使用谷歌字体。我使用 tailwindCSS 并且已经在 _document.js Head 部分导入了参考链接。在 tailwind.config 文件中，我定义了 fontFamily，但是当我尝试使用自定义类时，它不会将字体系列应用于 html 元素。我究竟做错了什么？
我的 _document.js 文件：
import Document, { Html, Head, Main, NextScript } from "next/document";
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
return (
<Html>
<Head>
<link
href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"
rel="stylesheet"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
tailwind.config 文件：
const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = {
content: [ …