[ SKILL_DOCUMENTATION ]
# MUI 主题定制
## 创建自定义主题
typescript
import { createTheme, ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
const theme = createTheme({
palette: {
mode: 'light',
primary: {
main: '#1976d2',
light: '#42a5f5',
dark: '#1565c0',
contrastText: '#fff'
},
secondary: {
main: '#9c27b0',
light: '#ba68c8',
dark: '#7b1fa2',
contrastText: '#fff'
},
error: {
main: '#d32f2f'
},
warning: {
main: '#ed6c02'
},
info: {
main: '#0288d1'
},
success: {
main: '#2e7d32'
}
},
typography: {
fontFamily: '"Inter", "Roboto", "Helvetica", "Arial", sans-serif',
h1: {
fontSize: '2.5rem',
fontWeight: 600
},
h2: {
fontSize: '2rem',
fontWeight: 600
},
button: {
textTransform: 'none',
fontWeight: 600
}
},
shape: {
borderRadius: 8
},
spacing: 8
});
function App() {
return (
{/* 你的应用 */}
);
}
## 深色模式支持
typescript
const getTheme = (mode: 'light' | 'dark') => createTheme({
palette: {
mode,
...(mode === 'light'
? {
// 浅色模式颜色
primary: { main: '#1976d2' },
background: {
default: '#f5f5f5',
paper: '#ffffff'
}
}
: {
// 深色模式颜色
primary: { main: '#90caf9' },
background: {
default: '#121212',
paper: '#1e1e1e'
}
})
}
});
function App() {
const [mode, setMode] = useState('light');
const theme = useMemo(() => getTheme(mode), [mode]);
return (
setMode(m => m === 'light' ? 'dark' : 'light')}>
{mode === 'light' ? : }
{/* 你的应用 */}
);
}
## 排版定制
typescript
const theme = createTheme({
typography: {
fontFamily: '"Inter", sans-serif',
fontSize: 14,
fontWeightLight: 300,
fontWeightRegular: 400,
fontWeightMedium: 500,
fontWeightBold: 700,
h1: {
fontSize: '3rem',
fontWeight: 700,
lineHeight: 1.2,
letterSpacing: '-0.01562em'
},
h2: {
fontSize
粤公网安备44030002003366号