css - Fluent UI React：有没有办法在运行时或编译时获取每个控件的样式？

Question

我知道我的请求可能看起来很奇怪，但原因是我试图将在 React 中开发的 Fluent UI 控件包装到自定义元素中。

不使用 ShadowDOM 时一切正常，我可以让一切正常工作，问题是当我想使用 ShadowDOM 来使用“slot”标签等功能时。

ShadowDOM 封装了 html 元素，因此不会继承全局样式。

使用此代码，我能够取回控件生成的 css，然后将其放入 ShadowDOM 中，到目前为止一切正常 :)

import { Stylesheet, InjectionMode } from '@uifabric/merge-styles';

let stylesheet = Stylesheet.getInstance();

// React Render
// ...
// ************

stylesheet.setConfig({ injectionMode: InjectionMode.none });
let css = stylesheet.getRules(true)

let styleElement = document.createElement('style');
styleElement.type = 'text/css';
styleElement.appendChild(document.createTextNode(stylesheet.getRules(true)));
this.showShadowRoot.appendChild(styleElement);

问题似乎在于，并非控件的所有样式都被返回，而只是呈现时需要的样式。

例如，如果我渲染 TextField 控件，返回的 css 正是渲染控件所需要的，如果我单击控件本身，则必须显示样式更改（例如焦点）的 css 不会立即生成。

分析 Fluent UI React 的来源，似乎有些控件我们通过 sass 实现了样式，有些则在 js 中使用 css。

那么问题来了：有没有办法在运行时或者编译时获取每个控件的全局样式呢？

提前致谢！