skills.rest
kamelmh
kamelmhCOMMUNITY
Explore all skills by this author →
GitHub

mui

Guide Material-UI v7 React component styling with sx props and theme integration.

Updated Aug 23, 2026
Search Tags:#react#responsive design#theme integration#mui#sx prop#v7 migration#type-safe styling
One-click install
npx skills add https://github.com/kamelmh/opencode --skill mui-kamelmh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mui
Source: https://github.com/kamelmh/opencode/tree/main/skills/mui
Command: npx skills add https://github.com/kamelmh/opencode --skill mui-kamelmh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams avoid inconsistent or outdated Material-UI v7 React component patterns by providing a practical, theme-aware approach to styling and composition.

Core Features & Use Cases

  • MUI v7 breaking-changes guidance: Covers key migration details such as onBackdropClick removal in favor of onClose, standardized slots/slotProps, and package export-based imports.
  • Type-safe sx styling patterns: Teaches how to structure sx styles using SxProps and Theme, including reusable patterns for simple vs complex styling needs.
  • Theme integration and responsive design: Shows how to use theme tokens and breakpoints (xs-xl) for mobile-first layouts and adaptive typography.

Quick Start

Use this Skill when updating an existing React component to match MUI v7 best practices and implement its styling with the sx prop using theme tokens and responsive breakpoints.

Frequently Asked Questions about mui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I migrate Material-UI components to v7 without breaking existing styles?▼

MUI v7 migration requires updating component APIs like replacing `onBackdropClick` with `onClose`, standardizing `slots`/`slotProps`, and using package export-based imports to align with new breaking changes.

What is the best way to use the MUI `sx` prop for type-safe styling in React?▼

Type-safe MUI `sx` styling uses `SxProps<Theme>` patterns to structure component styles, enabling reusable style definitions that integrate directly with your application's theme tokens.

How do I apply responsive design breakpoints using Material-UI v7?▼

MUI v7 responsive design uses theme breakpoints (`xs` through `xl`) within the `sx` prop to create mobile-first layouts and adaptive typography that scales across screen sizes.

How does theme integration work with Material-UI `ThemeProvider` and `useTheme`?▼

Theme integration in MUI v7 uses `ThemeProvider` to inject design tokens and `useTheme` to access them, ensuring consistent styling across all React components via the `sx` prop.

Can I use MUI v7 component conventions with existing React applications?▼

MUI v7 works with existing React applications by importing `@mui/material` and `@mui/icons-material` APIs, adopting `slots`/`slotProps` conventions, and applying `SxProps<Theme>` for type-safe styling.

Related Skills

Explore More Software Engineering Skills→
BigdropsBigdrops
1

mui

Provide patterns for building React apps with Material-UI v7.

Community
Advanced
RamonsDkaRamonsDka
1

mui

Provides scalable styling, theming and responsive design patterns for MUI v7 React interfaces.

Community
Intermediate
NammDevNammDev
2

frontend-dev-guidelines

Automate React/TypeScript frontend architecture guidance with MUI v7 and TanStack Router.

Community
Advanced
stephanjstephanj
9

mui

Implement Material-UI v7 components with sx prop styling and theme customization.

Community
Intermediate