import { renderToString } from "react-dom/server"
import { RemixServer } from "remix"
import type { EntryContext } from "remix"
import { resetIds, Stylesheet } from "@fluentui/react"

const sheet = Stylesheet.getInstance()

export default function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext
) {
  resetIds()
  let markup = renderToString(
    <RemixServer context={remixContext} url={request.url} />
  )

  markup = markup.replace(
    "__STYLES__",
    `<style data-merge-styles="true">${sheet.getRules(true)}</style>`
  )

  markup = markup.replace(
    "__SCRIPTS__",
    `<script type="text/javascript">
      window.FabricConfig = window.FabricConfig || {};
      window.FabricConfig.serializedStylesheet = ${sheet.serialize()};
    </script>`
  )

  responseHeaders.set("Content-Type", "text/html")

  return new Response("<!DOCTYPE html>" + markup, {
    status: responseStatusCode,
    headers: responseHeaders,
  })
}

重新启动混音应用程序

参考文献：

https://remix.run/docs/en/v1/guides/styling#css-in-js-libraries https://github.com/microsoft/fluentui/wiki/Server-side-rendering-and-browserless-testing#nextjs-setup https://github.com/microsoft/fluentui/issues/11411

如果您也想加载流利的图标，请将initializeIcons导入页面，并在任何函数之外调用它。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70457672

复制

相似问题

问如何使SSR与fluentui /Remix运行协同工作？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使SSR与fluentui /Remix运行协同工作？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使SSR与fluentui /Remix运行协同工作？
EN