同時使用 Joy UI 和 Material UI

了解如何在同一個專案中同時使用 Joy UI 和 Material UI。

簡介

同時使用它們主要有兩種使用情境

您現有的專案已經使用 Material UI，但您願意探索 Joy UI 提供的全新元件和樣式。
您已使用 Joy UI 開始您的專案，但發現缺少您需要的關鍵元件。

此外，同時使用它們時，請記住以下幾點

它們都使用 MUI System 作為其樣式引擎，該引擎使用 React context 進行主題設定。
主題作用域必須在其中一個函式庫上完成。

先決條件

在您的專案中安裝 @mui/material 和 @mui/joy。
兩個函式庫的版本都必須是 v5.12.0 或更高版本。

設定提供器

在 Material UI 的 ThemeProvider 內渲染 Joy UI 的 CssVarsProvider，並使用 THEME_ID 將主題彼此分開。

import {
  createTheme,
  ThemeProvider,
  THEME_ID as MATERIAL_THEME_ID,
} from '@mui/material/styles';
import { CssVarsProvider as JoyCssVarsProvider } from '@mui/joy/styles';
import CssBaseline from '@mui/material/CssBaseline';

const materialTheme = createTheme();

export default function App() {
  return (
    <ThemeProvider theme={{ [MATERIAL_THEME_ID]: materialTheme }}>
      <JoyCssVarsProvider>
        <CssBaseline enableColorScheme />
        ...Material UI and Joy UI components
      </JoyCssVarsProvider>
    </ThemeProvider>
  );
}

同步色彩模式

為了在提供器之間同步色彩模式，請從兩個函式庫中呼叫 setMode

import { useColorScheme as useJoyColorScheme } from '@mui/joy/styles';
import { useColorScheme as useMaterialColorScheme } from '@mui/material/styles';

const ModeToggle = () => {
  const { mode, setMode: setMaterialMode } = useMaterialColorScheme();
  const { setMode: setJoyMode } = useJoyColorScheme();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => {
    setMounted(true);
  }, []);
  if (!mounted) {
    // prevent server-side rendering mismatch
    // because `mode` is undefined on the server.
    return null;
  }
  return (
    <IconButton
      onClick={() => {
        setMaterialMode(mode === 'dark' ? 'light' : 'dark');
        setJoyMode(mode === 'dark' ? 'light' : 'dark');
      }}
    >
      {/** You can use `mode` from Joy UI or Material UI since they are synced **/}
      {mode === 'dark' ? <DarkMode /> : <LightMode />}
    </IconButton>
  );
};

注意事項

兩個函式庫都具有相同的類別名稱前綴

import MaterialTypography, {
  typographyClasses as materialTypographyClasses,
} from '@mui/material/Typography';
import JoyTypography, {
  typographyClasses as joyTyographyClasses,
} from '@mui/joy/Typography';
import Stack from '@mui/material/Stack';

<Stack
  sx={{
    // similar to `& .${joyTyographyClasses.root}`
    [`& .${materialTypographyClasses.root}`]: {
      color: 'red',
    },
  }}
>
  {/* Both components are red. */}
  <MaterialTypography>Red</MaterialTypography>
  <JoyTypography>Red</JoyTypography>
</Stack>;

Joy UI 和 Material UI 元件對於主題化元件有不同的名稱。例如，Joy UI 的按鈕使用 JoyButton，而 Material UI 的按鈕使用 MuiButton。