Fluent UI React: есть ли способ получить стиль для каждого элемента управления во время выполнения или во время компиляции?

Question

Я знаю, что мой запрос может показаться странным, но причина в том, что я пытаюсь обернуть элементы управления Fluent UI, разработанные в React, в пользовательские элементы.

Все в порядке, когда ShadowDOM не используется, я могу заставить все работать, проблема в том, когда я хочу использовать ShadowDOM для использования таких функций, как тег "слот".

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, другие используют css в js.

Тогда возникает вопрос: есть ли способ получить глобальный стиль для каждого элемента управления во время выполнения или во время компиляции?

Заранее спасибо!