2

如何安装流利的 UI 与混音运行反应？我相信这很重要，可以在这里解决，因为它是社区中采用 office-UI-fabric-react 的绊脚石。

4

1 回答 1

0

在研究了 FluentUI 和 Remix 的文档以及一些 github 问题之后，这就是行之有效的方法。

  1. 编辑root.tsx. 添加{typeof document === "undefined" ? "__STYLES__" : null}到头部标签。{typeof document === "undefined" ? "__SCRIPTS__" : null}在结束正文标记之前添加。
  2. 编辑entry.client.tsx包括：
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,
  })
}
  1. 重新启动您的混音应用程序

参考：
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

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

于 2022-02-23T22:03:06.083 回答