上篇介紹 MUI 基本安裝與使用方法，但我們不太可能用 MUI 完成整個網站的切版對吧？所以此篇將聚焦：
- MUI 與 Tailwind 協作
- 元件與主題客製化
這篇文章會更貼近實務應用情境作介紹
在 MUI 元件使用 Tailwind CSS v4
MUI 元件設定客製化有兩種方式
- 透過
sx傳入 props，<Box sx={{ width: 1024 }}>這是容器</Box>。 - 透過 Tailwind 設定，如果你是 Vite，可參考此篇官方文章。GlobalStyles styles 注入的樣式順序請按照官方文章指示，Tailwind 會使用 utilties layer 注入，如果 utilies 在 mui layer 前面會無法蓋過。
設定完畢後，就可以在 MUI component 使用<Box className="w-[1024px]">這是容器</Box>。
// main.tsx
import { StyledEngineProvider } from '@mui/material/styles';
import GlobalStyles from '@mui/material/GlobalStyles';
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<StyledEngineProvider enableCssLayer>
<GlobalStyles styles="@layer theme, base, mui, components, utilities;" />
{/* Your app */}
</StyledEngineProvider>
</React.StrictMode>,
);
讓 Tailwind 也能使用 MUI 樣式
- 將官方文件上的程式碼貼到你的全域 CSS 上，視每個專案結構，貼在 index.css 或創立新的 css 檔案都可以。
- 使用
createTheme將 MUI 原生的主題套用進全域設定，className也可以使用 MUI 設定了。
import './index.css'
import { StyledEngineProvider, ThemeProvider, createTheme } from '@mui/material/styles'
import GlobalStyles from '@mui/material/GlobalStyles'
// 使用預設主題並啟用 CSS 變數
const defaultTheme = createTheme({
cssVariables: true, // 關鍵設定，讓 index.css 的 MUI 變數生效
})
createRoot(document.getElementById('root')!).render(
<StrictMode>
<StyledEngineProvider enableCssLayer>
<ThemeProvider theme={defaultTheme}>
<GlobalStyles styles="@layer theme, base, mui, components, utilities;" />
<App />
</ThemeProvider>
</StyledEngineProvider>
</StrictMode>
)
客製 MUI 主題
通常網站都會有自己的一套 Design Guideline如果你是設計師
- 推薦你下載 MUI 社群發表的 Figma UI Kit，幫助，在既有基礎上修改樣式，保留更多時間設計與組裝畫面。
- 也可以使用 MUI 提供的主題編輯器預覽你的色彩設定，加速溝通。
如果你是工程師
我們可以使用 createTheme 覆蓋或擴充 MUI 原生樣式。
- 建立一個 muiTheme 檔案和資料夾，如果你是用的是 TypeScript 並且想擴充色票，這個資料夾還需要多新增一個 theme.d.ts。
- 如果只是要覆蓋原生色票是使用
palette，覆蓋字級則是typography，
// muiTheme.tsx
import { createTheme } from '@mui/material/styles';
// MUI 主題配置
export const muiTheme = createTheme({
cssVariables: true, // 啟用 CSS 變數
palette: {
primary: {
main: '#2e7d32', // 綠色
},
},
typography: {
fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
h1: {
fontSize: '1rem',
fontWeight: 300,
}
}
})
export default muiTheme
將客製主題使用 ThemeProvider 注入在全域
// main.tsx
import { StyledEngineProvider, ThemeProvider } from '@mui/material/styles'
import GlobalStyles from '@mui/material/GlobalStyles';
import { muiTheme } from './muiTheme/muiTheme'
createRoot(document.getElementById('root')!).render(
<StrictMode>
<StyledEngineProvider enableCssLayer>
<ThemeProvider theme={muiTheme}>
<GlobalStyles styles="@layer theme, base, mui, components, utilities;" />
<App />
</ThemeProvider>
</StyledEngineProvider>
</StrictMode>
)
- 自訂色票可以分為自訂「自訂色票」和「既有色票的輔助色」兩種辦法
- 既有色票輔助色：
Primary、Secondary是既有色票，原生的輔助色有main、light、dark等。假設我們今天想新增輔助色extraDark。// muiTheme.tsx const theme = createTheme({ colorSchemes: { light: { palette: { primary: { main: '#2e7d32', // 覆蓋色票 extraDark: "#541437", // 新增色票 }, }, } }, }); export default theme; - 自訂色票：
新增Primary、Secondary以外名稱的色票，假設名稱為background.default。
// muiTheme.tsx
const theme = createTheme({
colorSchemes: {
light: {
palette: {
background: {
extraLight: "#F7F7F7",
},
},
}
},
});
export default theme;
不管是擴充輔助色或是色票，如果有設定同步給 Tailwind 使用，別忘了要回到 CSS 檔案手動擴充呦！
- 直接客製主題中的元件樣式
依照文件中的示範，createTheme 中可以直接設定元件樣式。以下面設定 Button 樣式說明，我們可以看到像是&.Mui-disabled的樣式，這些樣式來源可以透過每個元件頁面，最下面的 API 文件中 CSS classes 段落找到。
const theme = createTheme({
components: {
MuiButton: {
styleOverrides: {
root: ({ theme }) => ({
'&.Mui-disabled': {
color: theme.palette.text.disabled,
},
}),
contained: ({ theme }) => ({
'&.MuiButton-containedPrimary:hover': {
backgroundColor: theme.palette.primary.dark,
},
}),
outlined: ({ theme }) => ({
'&.MuiButton-outlinedPrimary:hover': {
backgroundColor: theme.palette.primary.dark,
},
}),
},
},
},
});
擴充色票需要額外設定 TypeScript 型別
如果使用 TypeScript，我們需要用上剛才新建的 theme.d.ts 檔案定義型別來避免報錯。更多設定請參考文件。
// theme.d.ts
import {} from "@mui/material";
declare module "@mui/material/styles" {
// 擴充 MUI Palette 中的輔助色
interface PaletteColor {
extraLight?: string;
extraDark?: string;
}
// 擴充 createTheme MUI Palette 中的輔助色
interface SimplePaletteColorOptions {
extraLight?: string;
extraDark?: string;
}
// 建立新 Palette
interface TypeBackground {
extraLight?: string;
}
}
相同文章發布於我的部落格
