求助：Rooster-react通过Fluent UI Theme Provider设置Ribbon主题在CRA项目中无效

我正在开发一个基于CRA（Create React App）的React应用，使用rooster-react组件库（该库依赖@fluentui），尝试通过Fluent UI的Theme Provider设置编辑器工具栏（Ribbon）的主题，但设置并未生效。

为定位问题，我从头创建了一个新项目，但仍未解决，具体操作步骤如下：

• 使用CRA 5创建TypeScript模板的React应用，执行命令：

npx create-react-app test --template typescript

• 安装以下依赖包：

"@fluentui/react": "8.112.6",
"roosterjs": "^8.54.0",
"roosterjs-editor-types": "^8.54.0",
"roosterjs-react": "^8.51.0",

• 按照相关指引，将package-lock.json中的@fluentui/react-portal-compat-context包版本修改为9.0.6；
• 创建RoosterEditor组件，代码如下：

import { useMemo } from "react";
import { IEditor, getDarkColor } from "roosterjs";
import {
  createRibbonPlugin,
  getButtons,
  Ribbon,
  RibbonButton,
  Rooster,
  AllButtonKeys,
} from "roosterjs-react";
import { initializeIcons } from "@fluentui/react/lib/Icons";
import { ThemeProvider, DefaultPalette } from "@fluentui/react";

const darkPalette = Object.entries(DefaultPalette).reduce(
  (result, [name, color]) => ({ ...result, [name]: getDarkColor(color) }),
  { ...DefaultPalette }
);

initializeIcons();

export function RoosterEditor({ value }: {value?: string}) {
  const themeMode = "dark"; // 实际代码中使用自定义Provider和Hook
  const ribbonPlugin = useMemo(createRibbonPlugin, []);
  const plugins = useMemo(() => [ribbonPlugin], [ribbonPlugin]);
  const buttons = useMemo(() => getButtons(AllButtonKeys), []) as RibbonButton<string>[];

  const inDarkMode = themeMode === "dark";
  const themePalette = inDarkMode ? darkPalette : DefaultPalette;
  const theme = { palette: themePalette };

  return (
    <ThemeProvider theme={theme} applyTo="body">
      <Ribbon plugin={ribbonPlugin} buttons={buttons} />
      <Rooster plugins={plugins} initialContent={value} inDarkMode={inDarkMode} />
    </ThemeProvider>
  );
}

• 更新index.tsx文件，代码如下：

import React from "react";
import ReactDOM from "react-dom/client";
import { RoosterEditor } from "./RoosterEditor";

const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
root.render(<React.StrictMode><RoosterEditor /></React.StrictMode>);

我创建了示例仓库和在线演示，但主题设置均未生效；但在Codesandbox的空白React沙箱中执行相同步骤却能正常工作；也可参考roosterjs官方Demo（主题切换按钮位于Ribbon的最后位置）。

请问我在空白CRA项目中的操作哪里出现了问题？

内容的提问来源于stack exchange，提问作者nick zoum