[ PROMPT_NODE_24983 ]
Styling Guide
[ SKILL_DOCUMENTATION ]
# MUI Styling Guide
## The sx Prop
The `sx` prop is the primary styling method in MUI v7+:
```typescript
```
## Theme-Aware Values
```typescript
// Spacing (multiplied by theme.spacing, default 8px)
sx={{ p: 2 }} // padding: 16px
// Colors from palette
sx={{ bgcolor: 'primary.main', color: 'text.secondary' }}
// Breakpoints
sx={{
width: { xs: '100%', sm: '50%', md: '33%' }
}}
// Typography variants
sx={{ typography: 'h4' }} // Applies theme.typography.h4
```
## Responsive Styles
```typescript
```
## Pseudo-Selectors and Nested Styles
```typescript
```
## Dynamic Styles
```typescript
interface CardProps {
isActive: boolean;
priority: 'low' | 'medium' | 'high';
}
function Card({ isActive, priority }: CardProps) {
return (
);
}
```
## Global Styles with GlobalStyles
```typescript
import { GlobalStyles } from '@mui/material';
```
## Styled Components API
For reusable styled components:
```typescript
import { styled } from '@mui/material/styles';
const StyledCard = styled(Card)(({ theme }) => ({
padding: theme.spacing(2),
borderRadius: theme.shape.borderRadius * 2,
backgroundColor: theme.palette.background.paper,
transition: theme.transitions.create(['transform', 'box-shadow']),
'&:hover': {
transform: 'translateY(-4px)',
boxShadow: theme.shadows[8]
}
}));
// With props
interface StyledButtonProps {
variant: 'primary' | 'secondary';
}
const StyledButton = styled(Button)(({ theme, variant }) => ({
backgroundColor: variant === 'primary'
? theme.palette.primary.main
: theme.palette.secondary.main,
color: theme.palette.primary.contrastText,
'&:hover': {
backgroundColor: variant === 'primary'
? theme.palette.primary.dark
: theme.palette.secondary.dark
}
}));
```
## Theme Overrides
```typescript
import { createTheme } from '@mui/material/styles';
const theme = createTheme({
components: {
MuiButton: {
styleOverrides: {
root: {
borderRadius: 8,
textTransform: 'none',
fontWeight: 600
},
containedPrimary: {
boxShadow: 'none',
'&:hover': {
boxShadow: 'none'
}
}
},
defaultProps: {
disableRipple: true
}
},
MuiCard: {
styleOverrides: {
root: {
borderRadius: 12,
boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
}
}
}
}
});
```
## CSS Variables (MUI v7+)
```typescript
// In theme configuration
const theme = createTheme({
cssVariables: true
});
// Use in sx prop
// Use in CSS
.custom-element {
background-color: var(--mui-palette-background-paper);
padding: var(--mui-spacing-2);
}
```
## Common Patterns
### Card with Hover Effect
```typescript
```
### Gradient Background
```typescript
`linear-gradient(45deg, ${theme.palette.primary.main} 30%, ${theme.palette.secondary.main} 90%)`,
color: 'white'
}}
/>
```
### Sticky Header
```typescript
theme.zIndex.drawer + 1
}}
/>
```
### Flexbox Layouts
```typescript
```
## Performance Tips
- **Use sx prop for dynamic styles** - Better tree-shaking
- **Use styled() for static reusable components** - Better performance
- **Avoid inline functions in sx** - Can cause re-renders
- **Leverage theme tokens** - Consistent and performant
```typescript
// ❌ Bad: Inline function in sx
({ p: 2 })} />
// ✅ Good: Direct object
// ✅ Good: Memoized function for complex logic
const getSx = useMemo(() => ({ p: 2, /* complex logic */ }), [deps]);
```
## Debugging Styles
```typescript
// Inspect theme in console
{
console.log('Theme:', theme);
return { p: 2 };
}} />
// Use sx as array for conditional styles
```