在 nextjs 中无法完整的渲染gutenberg的样式

我的使用wordpress和WPGraphQL作为API，nextjs作为页面渲染，但是我不知道如何将编辑器中的样式完整的复现到nextjs中
编辑器使用的是 gutenberg

 

 

 

 

 

这是我的 styles/globals.scss

@use 'sass:math';

@import "~@wordpress/base-styles/colors";
@import "~@wordpress/base-styles/variables";
@import "~@wordpress/base-styles/functions";
@import "~@wordpress/base-styles/long-content-fade";
@import "~@wordpress/base-styles/mixins";
@import "~@wordpress/base-styles/breakpoints";
@import "~@wordpress/base-styles/animations";
@import "~@wordpress/base-styles/z-index";
@import "~@wordpress/base-styles/default-custom-properties";

@import "~@wordpress/components/src/style";
@import "~@wordpress/block-editor/src/style";

@import "~@wordpress/block-library/src/editor";
@import "~@wordpress/block-library/src/style";
@import "~@wordpress/block-library/src/theme";

这是我在 pages/_app.tsx

import "@styles/globals.scss"

import React from "react";
import type {AppProps} from 'next/app'

export default function App({Component, pageProps}: AppProps) {
    return <>
        <Component {...pageProps} />
    </>
}

<div dangerouslySetInnerHTML={{__html: post?.content ?? ""}}></div>

大佬们可以帮我解决一下这个问题么？

The page I need help with: [log in to see the link]