Почему переменные CSS в моем приложении FluentUI React не определены? ⇐ CSS

[Anonymous]

У меня довольно сложное приложение React (v18), использующее 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 (





);
};

И затем у меня есть выноска с некоторыми компонентами Checkbox внутри нее:

Код: Выделить всё

    const filterDialog = (

Filters






);

return (

...

{showFilterDialog ? filterDialog : null}




...

Флажки отображались неправильно (интервал был отключен, а граница флажка была слишком толстой, поэтому я посмотрел на консоль разработчика и увидел следующее:


Я нахожусь какая-то потеря относительно того, как диагностировать, что проблема может быть... Я не эксперт во внутренней работе FluentUI, надеюсь, кто-то здесь есть!
ОБНОВЛЕНИЕ: я вижу, что FluentProvider устанавливает эти переменные... но по какой-то причине стили флажков не имеют к ним доступа?
[img]https://i.sstatic .net/9ngpJcnK.png[/img]


Подробнее здесь: https://stackoverflow.com/questions/792 ... -undefined