reactjs - نمیتوان از تم MUI با ویژگی css از Emotion استفاده کرد

من در حال تلاش برای پیادهسازی یک تم تاریک در برنامه وب هستم و استایلهای خود را از فقط styles.css با بازنویسی با !important به prop css از emotion منتقل کردهام.

در اینجا کد از App.tsx است، جایی که من تم خود را ایجاد میکنم و از ThemeProvider استفاده میکنم

const theme = createTheme({
  typography: {
    allVariants: {
      fontFamily: 'SFCompactDisplay',
    },
  },
  palette: {
    primary: {
      main: '#0052cc',
    },
  },
});

console.log(theme);

const App: React.FC = () => (
  <ThemeProvider theme={theme}>
    <Switch>
      <Route path="/login" component={Login} exact />
      <ProtectedRoute path="/" component={Dashboard} exact />
      {/* <Route path="/register" component={Register} /> */}
      <Redirect to="/" />
    </Switch>
    <Toaster
      position="top-right"
      toastOptions={{
        style: {
          fontWeight: 400,
        },
      }}
    />
  </ThemeProvider>
);

همچنین، این کد از css.ts است که سپس آن را در یکی از کامپوننتها استفاده میکنم

export const splitContainer = (theme) => {
  console.log(theme);
};

export const content: CSSWithTheme = (theme) => ({
  maxWidth: '800px',
  width: '100%',
  [theme.breakpoints.down('md')]: {
    padding: '0 24px',
    maxWidth: '100%',
  },
});

من یک خطا دریافت میکنم که بیان میکند هر ویژگی از theme تعریف نشده است. من هر دو theme را در کنسول لاگ کردهام، اولی در App شبیه theme معمولی MUI با ویژگیهای breakpoints و pallete به نظر میرسد، اما آن یکی در css.ts به این شکل است:

من از splitContainer در کامپوننت داشبورد استفاده میکنم

  return (
    <Box css={css.splitContainer}>
      <SideBar tab={tab} setTab={setTab} />
      <Box className="container-main-overview">
        {tab === 1 && <MachineList />}
        {tab === 4 && <AddInstance />}
        {tab === 5 && <Support />}
      </Box>
    </Box>
  );

استایلها کار میکنند، با این حال وقتی سعی میکنم از تم استفاده کنم، خطای undefined دریافت میکنم

پاسخ شماره ۱

همانطور که @Ryan Cogswell اشاره کرد، شما نیاز دارید که ارائهدهنده تم Emotion را نیز اعلام کنید. از آنجایی که تم Emotion یک شیء خالی است، میتوانید تم MUI را به همان شکل منتقل کنید. اگر از TypeScript استفاده میکنید، باید رابط تم Emotion را گسترش دهید. اگر نیاز دارید حالت تاریک را مدیریت کنید، میتوانید ارائهدهنده تم خود را داشته باشید (بر اساس API زمینه React) تا تمهای روشن و تاریک را تغییر دهید و برای ترکیب این دو ارائهدهنده ذکر شده، MUI و Emotion، استفاده کنید.

در اینجا یک مثال کوچک برای ارائهدهنده زمینه است (بدون تعریف زمینه)

const ThemeProvider: FC<ThemeProviderProps> = ({ children }) => {
  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
  const defaultTheme = useMemo<ThemeContextProps['themeMode']>(
    () => (prefersDarkMode ? 'dark' : 'light'),
    [prefersDarkMode],
  );

  const [themeMode, setThemeMode] =
    useState<ThemeContextProps['themeMode']>(defaultTheme);

  const toggleTheme = useCallback(() => {
    setThemeMode((prevValue) => 
      (prevValue === 'light' ? 'dark' : 'light'));
  }, []);

  const providerProps = useMemo(
    () => ({
      themeMode,
      theme: themeMode === 'light' ? lightTheme : darkTheme,
      toggleTheme,
    }),
    [themeMode, toggleTheme],
  );

  return (
    <ThemeContext.Provider value={providerProps}>
      <MuiThemeProvider theme={providerProps.theme}>
        <EmotionThemeProvider theme={providerProps.theme}>
          {children}
        </EmotionThemeProvider>
      </MuiThemeProvider>
    </ThemeContext.Provider>
  );
}