FluentUI React应用中CSS变量未定义问题求助

我现在维护一个基于React 18、FluentUI v8、Vite v5搭建的复杂应用。有一批受主题控制的CSS变量，但在我的应用里大多显示未定义状态——可我明明已经配置了ThemeProvider啊！下面我贴出相关代码，希望能帮大家定位问题。

应用主题配置代码 #

const App = () => {
  ...

  const theme = createTheme({
    palette: {
      themePrimary: '#ff462d',
      themeLighterAlt: '#fff8f7',
      themeLighter: '#ffe1de',
      themeLight: '#ffc8c0',
      themeTertiary: '#ff9082',
      themeSecondary: '#ff5c47',
      themeDarkAlt: '#e63f29',
      themeDark: '#c23523',
      themeDarker: '#8f271a',
      neutralLighterAlt: '#faf9f8',
      neutralLighter: '#f3f2f1',
      neutralLight: '#edebe9',
      neutralQuaternaryAlt: '#e1dfdd',
      neutralQuaternary: '#d0d0d0',
      neutralTertiaryAlt: '#c8c6c4',
      neutralTertiary: '#a19f9d',
      neutralSecondary: '#605e5c',
      neutralPrimaryAlt: '#3b3a39',
      neutralPrimary: '#323130',
      neutralDark: '#201f1e',
      black: '#000000',
      white: '#ffffff',
    },
    components: {
      IconButton: {
        styles: {
          rootDisabled: {
            opacity: 0.5
          },
          root: {
            opacity: 1,
            backgroundColor: '#fff'
          }
        }
      }
    }
  });

  ...

  return (
    <FluentProvider theme={webLightTheme}>
      <ThemeProvider theme={theme}>
        <RouterProvider router={router} />
      </ThemeProvider>
    </FluentProvider>
  );
};

弹窗与复选框组件代码 #

我在一个Callout弹窗里放了几个Checkbox组件：

const filterDialog = (
    <Callout
        className={styles.filterDialog}
        role="dialog"
        target={`#${filterButtonId}`}
        onDismiss={hideFilters}
    >
        <Text as="h1" block variant="large">Filters</Text>
        <Stack horizontal horizontalAlign="space-between" tokens={{ childrenGap: '5px' }}>
            <Checkbox size="large" label={ filterCheckboxLabel("Feedback") } />
            <Checkbox disabled={!filterByFeedback} label={ filterCheckboxLabel("Liked?") } />
            <Checkbox disabled={!filterByFeedback} label={ filterCheckboxLabel("Disiked?") } />
        </Stack>
    </Callout>
);

return (
    <Stack className={styles.top}>
    ...
                    <IconButton id={filterButtonId} disabled={false} onClick={toggleFilters} iconProps={{ iconName: "filter" }} />
                    {showFilterDialog ? filterDialog : null}
                    <IconButton disabled={true} iconProps={{ iconName: "trash" }} />
                </StackItem>
            </Stack>
        </StackItem>
        ...

问题现象 #

这些Checkbox渲染得很奇怪：间距不对，复选框的边框也异常粗。打开开发者控制台一看，发现了这个情况：

截图显示多个CSS变量（如--palette-neutralPrimary、--palette-neutralSecondary等）均标记为未定义状态

我现在有点懵，不知道该从哪里入手排查...我对FluentUI的内部机制不算精通，希望有懂行的朋友能帮我分析一下！

更新1： #

我发现FluentProvider其实已经在设置这些CSS变量了，但不知道为什么Checkbox的样式就是访问不到它们？

截图显示FluentProvider元素上已经挂载了这些CSS变量，但Checkbox所在的子元素无法读取到

更新2： #

我现在有了点进展！看起来像Callout这类浮层组件，是渲染在FluentProvider包裹的组件层级之外的“默认层宿主（Default Layer Host）”上下文里的。现在我的问题变成了：怎么用FluentProvider包裹默认层宿主上下文？

备注：内容来源于stack exchange，提问作者gred