How to use docusaurus with Fluent UI?

Question

I am now working on Docusaurus (which is a static site generator) with Fluent UI, and I don't know how to setup SSR for Fluent UI, there's no any useful information on Internet.

What I've known:

Fluent UI use a lib called merge-styles to achieve its CSS-in-JS support. merge-styles will generate CSS class for each style set, and these classes must be written into HTML <head></head> tag to be active. This lib uses an ID counter which will add an ID suffix to each class. In general, both mergeStyles and mergeStyleSets call will generate some CSS classes, and in server-side and client-side, the value of ID counter may be different. Docusaurus is a pure static site generator which has a building bundle without any server code. It will pre-execute all codes on building and uses the result of each page as final generated html file. So, in building process, Fluent UI seems generated a set of stylesheets with a set of IDs, and if I use:

import {Stylesheet, resetIds} from "@fluentui/react";

// These codes are run on the server side.
resetIds();
let stylesheet = Stylesheet.getInstance();
let serializedStylesheet = stylesheet.serialize();
let rules = stylesheet.getRules(true);

// Inject rules into generated codes as <style data-merge-styles="true">{rules}</style>

let script = `
    window.FabricConfig = window.FabricConfig || {};
    window.FabricConfig.serializedStylesheet = ${serializedStylesheet};
`;

// Inject script into generated codes as <script>{script}</script>

I actually will get another set of classNames and rules with totally different ID, and that makes my page looks a mess.

I saw another way is renderStatic, but I think I cannot use it because I cannot get the real root component of Docusaurus page.

I know that Stylesheet is an object which is registered in a variable named _global, and this variable is initialized in the file Stylesheet.ts. This initialization process will first check if there is an object called window.FabricConfig and then assign it or an empty object to _global. When we call getInstance(), this function will search _global for an existing Stylesheet object, and if there's no such object, it will initialize a brand new instance with all properties have a same value {}. So, what is confusing me is:

Why the client uses a new Stylesheet object instead of the one I've already injected to the page's window? (I can make sure that the injected codes are executed before all other scripts)
The Stylesheet object is initialized with all properties are {}, so, where the values of Stylesheet object that I injected come from?
How could I get the actual Stylesheet object used in server-side rendering?

I hope there could be some experts of this question could do me a favour. Thanks.

How to use docusaurus with Fluent UI?

0 Answers0