菜单
Implement Material Design 3 in React using MUI (Material UI) with M3-aligned theming, or @material/web with React wrappers. Covers theme setup, component usage, dark mode, and Next.js SSR integration. Use this when building M3-styled React or Next.js applications.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Help choose an appropriate software/open-source license (e.g., MIT, Apache-2.0, GPL-3.0, AGPL-3.0, MPL-2.0, BSD) based on the user's goals and constraints; explain tradeoffs (permissive vs copyleft, patent grants, SaaS/network copyleft); check for dependency-driven constraints; and generate or update LICENSE files and short license headers. Use when a user asks what license to pick, whether licenses are compatible, or to add a LICENSE file to a repo.
Applies Material Design 3 Expressive dynamic color and theming principles to user interfaces. Use this when working on color palettes, themes, dynamic color systems, accessibility, or when the user asks to apply Material Design 3 color guidelines to a design or application.
Comprehensive guide to Material Design 3 components — from baseline Material You through M3 Expressive. Covers action, containment, communication, navigation, selection, and text input components with specifications, states, and implementation guidelines. Use this when building or styling UI components following Material Design 3 guidelines.
Master guide for Material Design 3 — covering the full specification from Material You foundations through M3 Expressive. Explains when to use each Material Design 3 skill subset (color, motion, typography, shape, layout, components, icons). Use this when starting a Material Design 3 project, when you need to understand which M3 skill to apply, or when the user asks about Material Design 3 in general.
Applies Material Design 3 Expressive motion and animation principles to create natural, intuitive, and engaging user experiences. Use this when implementing animations, transitions, micro-interactions, or when the user asks to apply Material Design 3 motion guidelines.
Applies Material Design 3 Expressive shape and containment principles including rounded corners, morphing shapes, and container design. Use this when working on component shapes, borders, containment, or when the user asks to apply Material Design 3 shape guidelines.
| name | m3-web-react |
| description | Implement Material Design 3 in React using MUI (Material UI) with M3-aligned theming, or @material/web with React wrappers. Covers theme setup, component usage, dark mode, and Next.js SSR integration. Use this when building M3-styled React or Next.js applications. |
| license | Apache-2.0 |
MUI (@mui/material) is the most popular React UI library. MUI v6 adds the Pigment CSS engine for better performance. M3 theming support is evolving — MUI primarily implements M2 component APIs but supports M3 color tokens and theming through customization.
Keywords: Material Design 3, M3, React, MUI, Material UI, @mui/material, Next.js, SSR, React Server Components, material-web-components-react
npm install @mui/material @emotion/react @emotion/styled
For Next.js SSR:
npm install @mui/material @emotion/react @emotion/styled @mui/material-nextjs
import { createTheme, ThemeProvider } from '@mui/material/styles';
const m3Theme = createTheme({
palette: {
primary: { main: '#6750A4' },
secondary: { main: '#625B71' },
error: { main: '#B3261E' },
background: {
default: '#FEF7FF',
paper: '#F3EDF7',
},
},
shape: { borderRadius: 20 }, // M3 Large radius
typography: {
fontFamily: '"Roboto", sans-serif',
},
});
const m3ThemeDark = createTheme({
palette: {
mode: 'dark',
primary: { main: '#D0BCFF' },
secondary: { main: '#CCC2DC' },
error: { main: '#F2B8B5' },
background: {
default: '#141218',
paper: '#2B2930',
},
},
shape: { borderRadius: 20 },
typography: {
fontFamily: '"Roboto", sans-serif',
},
});
function App() {
return (
<ThemeProvider theme={m3Theme}>
{/* Your M3-styled components */}
</ThemeProvider>
);
}
import Button from '@mui/material/Button';
<Button variant="contained">Filled</Button>
<Button variant="outlined">Outlined</Button>
<Button variant="text">Text</Button>
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import Typography from '@mui/material/Typography';
<Card elevation={1}>
<CardContent>
<Typography variant="h6">Title</Typography>
<Typography variant="body2">Content</Typography>
</CardContent>
</Card>
import TextField from '@mui/material/TextField';
<TextField label="Email" variant="outlined" />
<TextField label="Name" variant="filled" />
import BottomNavigation from '@mui/material/BottomNavigation';
import BottomNavigationAction from '@mui/material/BottomNavigationAction';
import HomeIcon from '@mui/icons-material/Home';
import SearchIcon from '@mui/icons-material/Search';
<BottomNavigation value={value} onChange={handleChange}>
<BottomNavigationAction label="Home" icon={<HomeIcon />} />
<BottomNavigationAction label="Search" icon={<SearchIcon />} />
</BottomNavigation>
// app/layout.tsx
import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
import { ThemeProvider } from '@mui/material/styles';
import { m3Theme } from './theme';
export default function RootLayout({ children }) {
return (
<html>
<body>
<AppRouterCacheProvider>
<ThemeProvider theme={m3Theme}>
{children}
</ThemeProvider>
</AppRouterCacheProvider>
</body>
</html>
);
}
@material/web in ReactUse Google's official web components directly in React:
// Client component (Next.js or Vite)
'use client';
import '@material/web/button/filled-button.js';
export function M3Button({ children }) {
return <md-filled-button>{children}</md-filled-button>;
}
React wrappers: material-web-components-react provides thin React abstractions over @material/web.
createTheme using M3 color rolesborderRadius: 20)AppRouterCacheProvider wraps the app for SSRtheme.ts — Ready-to-use MUI theme config with M3 orange palette (light + dark) included in this skill's directory. Copy into your project and customize.material-theme-builder skill — Generate a custom palette from any source color.