0
# Styling System
1

2
Comprehensive theming and styling system with theme creation, color manipulation, and CSS utilities.
3

4
## Capabilities
5

6
### Theme Creation
7

8
```typescript { .api }
9
/**
10
 * Creates custom themes
11
 * @param options - Theme configuration options
12
 * @returns Theme object
13
 */
14
function createTheme(options?: ThemeOptions): Theme;
15

16
/**
17
 * Extends themes with CSS variables support
18
 * @param options - Extended theme options
19
 * @returns Extended theme object
20
 */
21
function extendTheme(options?: CssVarsThemeOptions): Theme;
22

23
interface ThemeOptions {
24
  palette?: PaletteOptions;
25
  typography?: TypographyOptions;
26
  spacing?: SpacingOptions;
27
  breakpoints?: BreakpointsOptions;
28
  zIndex?: ZIndexOptions;
29
  transitions?: TransitionsOptions;
30
  components?: ComponentsOptions;
31
  mixins?: MixinsOptions;
32
  shadows?: Shadows;
33
  shape?: ShapeOptions;
34
}
35

36
interface Theme {
37
  palette: Palette;
38
  typography: Typography;
39
  spacing: Spacing;
40
  breakpoints: Breakpoints;
41
  zIndex: ZIndex;
42
  transitions: Transitions;
43
  components?: Components;
44
  mixins: Mixins;
45
  shadows: Shadows;
46
  shape: Shape;
47
}
48
```
49

50
### Theme Provider
51

52
```typescript { .api }
53
/**
54
 * Context provider for themes
55
 * @param props - ThemeProvider configuration
56
 * @returns ThemeProvider component
57
 */
58
function ThemeProvider(props: ThemeProviderProps): JSX.Element;
59

60
interface ThemeProviderProps {
61
  theme: Theme;
62
  children: React.ReactNode;
63
}
64
```
65

66
### Theme Hooks
67

68
```typescript { .api }
69
/**
70
 * Hook for accessing current theme
71
 * @returns Current theme object
72
 */
73
function useTheme(): Theme;
74

75
/**
76
 * Hook for merging component props with theme defaults
77
 * @param props - Component props and theme key
78
 * @returns Merged props with theme defaults
79
 */
80
function useThemeProps<T>(props: UseThemePropsProps<T>): T;
81

82
interface UseThemePropsProps<T> {
83
  props: T;
84
  name: string;
85
}
86
```
87

88
**Usage Examples:**
89

90
```typescript
91
import { createTheme, ThemeProvider, useTheme } from "@mui/material/styles";
92

93
// Custom theme creation
94
const theme = createTheme({
95
  palette: {
96
    primary: {
97
      main: '#1976d2',
98
      light: '#42a5f5',
99
      dark: '#1565c0',
100
      contrastText: '#fff',
101
    },
102
    secondary: {
103
      main: '#dc004e',
104
    },
105
  },
106
  typography: {
107
    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
108
    h1: {
109
      fontSize: '2.125rem',
110
      fontWeight: 300,
111
    },
112
  },
113
  spacing: 8,
114
  shape: {
115
    borderRadius: 12,
116
  },
117
});
118

119
// Using theme provider
120
<ThemeProvider theme={theme}>
121
  <App />
122
</ThemeProvider>
123

124
// Using theme in components
125
function MyComponent() {
126
  const theme = useTheme();
127
  
128
  return (
129
    <Box
130
      sx={{
131
        color: theme.palette.primary.main,
132
        padding: theme.spacing(2),
133
        borderRadius: theme.shape.borderRadius,
134
      }}
135
    >
136
      Themed component
137
    </Box>
138
  );
139
}
140
```
141

142
### Styled Components
143

144
```typescript { .api }
145
/**
146
 * Styled-components API for creating styled components
147
 * @param component - Component to style
148
 * @returns Styled component factory
149
 */
150
function styled<C extends React.ComponentType<any>>(
151
  component: C
152
): StyledComponent<C>;
153

154
type StyledComponent<C> = (
155
  template: TemplateStringsArray | CSSObject | ((props: any) => CSSObject),
156
  ...args: any[]
157
) => React.ComponentType<React.ComponentProps<C>>;
158
```
159

160
**Usage Examples:**
161

162
```typescript
163
import { styled } from "@mui/material/styles";
164
import { Button, Box } from "@mui/material";
165

166
// Styled component with template literal
167
const StyledButton = styled(Button)(({ theme }) => ({
168
  color: theme.palette.primary.main,
169
  backgroundColor: theme.palette.primary.light,
170
  '&:hover': {
171
    backgroundColor: theme.palette.primary.main,
172
  },
173
}));
174

175
// Styled component with object syntax
176
const CustomBox = styled(Box)<{ highlighted?: boolean }>(({ theme, highlighted }) => ({
177
  padding: theme.spacing(2),
178
  borderRadius: theme.shape.borderRadius,
179
  backgroundColor: highlighted ? theme.palette.action.selected : 'transparent',
180
}));
181

182
// Usage
183
<StyledButton variant="contained">Custom Button</StyledButton>
184
<CustomBox highlighted>Highlighted Box</CustomBox>
185
```
186

187
### Color Functions
188

189
```typescript { .api }
190
/**
191
 * Adds alpha transparency to colors
192
 * @param color - Color string
193
 * @param value - Alpha value (0-1)
194
 * @returns Color string with alpha
195
 */
196
function alpha(color: string, value: number): string;
197

198
/**
199
 * Darkens colors
200
 * @param color - Color string
201
 * @param coefficient - Darkening coefficient (0-1)
202
 * @returns Darkened color string
203
 */
204
function darken(color: string, coefficient: number): string;
205

206
/**
207
 * Lightens colors
208
 * @param color - Color string
209
 * @param coefficient - Lightening coefficient (0-1)
210
 * @returns Lightened color string
211
 */
212
function lighten(color: string, coefficient: number): string;
213

214
/**
215
 * Emphasizes colors (darkens light colors, lightens dark colors)
216
 * @param color - Color string
217
 * @param coefficient - Emphasis coefficient (0-1)
218
 * @returns Emphasized color string
219
 */
220
function emphasize(color: string, coefficient: number): string;
221

222
/**
223
 * Calculates contrast ratio between two colors
224
 * @param foreground - Foreground color
225
 * @param background - Background color
226
 * @returns Contrast ratio number
227
 */
228
function getContrastRatio(foreground: string, background: string): number;
229

230
/**
231
 * Calculates color luminance
232
 * @param color - Color string
233
 * @returns Luminance value (0-1)
234
 */
235
function getLuminance(color: string): number;
236
```
237

238
**Usage Examples:**
239

240
```typescript
241
import { alpha, darken, lighten, emphasize } from "@mui/material/styles";
242

243
// Using color functions in styled components
244
const StyledComponent = styled('div')(({ theme }) => ({
245
  backgroundColor: alpha(theme.palette.primary.main, 0.1),
246
  borderColor: darken(theme.palette.primary.main, 0.2),
247
  '&:hover': {
248
    backgroundColor: emphasize(theme.palette.primary.main, 0.15),
249
  },
250
}));
251

252
// Using in sx prop
253
<Box
254
  sx={{
255
    bgcolor: (theme) => alpha(theme.palette.error.main, 0.1),
256
    border: (theme) => `1px solid ${darken(theme.palette.error.main, 0.5)}`,
257
  }}
258
>
259
  Alert content
260
</Box>
261
```
262

263
### SX Prop System
264

265
```typescript { .api }
266
/**
267
 * SX prop type for inline styling with theme integration
268
 */
269
type SxProps<Theme = {}> = 
270
  | SystemStyleObject<Theme>
271
  | ((theme: Theme) => SystemStyleObject<Theme>)
272
  | Array<SystemStyleObject<Theme> | ((theme: Theme) => SystemStyleObject<Theme>)>;
273

274
interface SystemStyleObject<Theme = {}> {
275
  // Spacing
276
  m?: number | string;
277
  mt?: number | string;
278
  mr?: number | string;
279
  mb?: number | string;
280
  ml?: number | string;
281
  mx?: number | string;
282
  my?: number | string;
283
  p?: number | string;
284
  pt?: number | string;
285
  pr?: number | string;
286
  pb?: number | string;
287
  pl?: number | string;
288
  px?: number | string;
289
  py?: number | string;
290
  
291
  // Colors
292
  color?: string;
293
  bgcolor?: string;
294
  backgroundColor?: string;
295
  
296
  // Typography
297
  fontFamily?: string;
298
  fontSize?: number | string;
299
  fontWeight?: number | string;
300
  fontStyle?: string;
301
  textAlign?: string;
302
  
303
  // Layout
304
  display?: string;
305
  position?: string;
306
  top?: number | string;
307
  right?: number | string;
308
  bottom?: number | string;
309
  left?: number | string;
310
  width?: number | string;
311
  height?: number | string;
312
  minWidth?: number | string;
313
  minHeight?: number | string;
314
  maxWidth?: number | string;
315
  maxHeight?: number | string;
316
  
317
  // Flexbox
318
  flexDirection?: string;
319
  flexWrap?: string;
320
  justifyContent?: string;
321
  alignItems?: string;
322
  alignContent?: string;
323
  alignSelf?: string;
324
  flex?: number | string;
325
  flexGrow?: number;
326
  flexShrink?: number;
327
  flexBasis?: number | string;
328
  
329
  // Borders
330
  border?: number | string;
331
  borderTop?: number | string;
332
  borderRight?: number | string;
333
  borderBottom?: number | string;
334
  borderLeft?: number | string;
335
  borderColor?: string;
336
  borderRadius?: number | string;
337
  
338
  // Other properties
339
  opacity?: number;
340
  overflow?: string;
341
  textOverflow?: string;
342
  whiteSpace?: string;
343
  
344
  // Responsive breakpoints
345
  [key: string]: any;
346
}
347
```
348

349
**Usage Examples:**
350

351
```typescript
352
import { Box, Typography } from "@mui/material";
353

354
// Basic sx usage
355
<Box
356
  sx={{
357
    p: 2,
358
    m: 1,
359
    bgcolor: 'primary.main',
360
    color: 'white',
361
    borderRadius: 1,
362
  }}
363
>
364
  Styled with sx
365
</Box>
366

367
// Responsive sx
368
<Typography
369
  sx={{
370
    fontSize: {
371
      xs: '1rem',
372
      sm: '1.25rem',
373
      md: '1.5rem',
374
    },
375
    textAlign: {
376
      xs: 'center',
377
      md: 'left',
378
    },
379
  }}
380
>
381
  Responsive text
382
</Typography>
383

384
// Function-based sx with theme
385
<Box
386
  sx={(theme) => ({
387
    p: theme.spacing(2),
388
    bgcolor: alpha(theme.palette.primary.main, 0.1),
389
    border: `1px solid ${theme.palette.primary.main}`,
390
    borderRadius: theme.shape.borderRadius,
391
    '&:hover': {
392
      bgcolor: alpha(theme.palette.primary.main, 0.2),
393
    },
394
  })}
395
>
396
  Theme-aware styling
397
</Box>
398
```
399

400
### Responsive Breakpoints
401

402
```typescript { .api }
403
/**
404
 * Default breakpoint values and utilities
405
 */
406
interface Breakpoints {
407
  keys: BreakpointKey[];
408
  values: BreakpointValues;
409
  up: (key: BreakpointKey) => string;
410
  down: (key: BreakpointKey) => string;
411
  between: (start: BreakpointKey, end: BreakpointKey) => string;
412
  only: (key: BreakpointKey) => string;
413
}
414

415
type BreakpointKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
416

417
interface BreakpointValues {
418
  xs: number; // 0
419
  sm: number; // 600
420
  md: number; // 900
421
  lg: number; // 1200
422
  xl: number; // 1536
423
}
424

425
/**
426
 * Hook for responsive design with media queries
427
 * @param query - Media query string or function
428
 * @returns Boolean indicating if query matches
429
 */
430
function useMediaQuery<Theme = DefaultTheme>(
431
  query: string | ((theme: Theme) => string),
432
  options?: UseMediaQueryOptions
433
): boolean;
434
```
435

436
**Usage Examples:**
437

438
```typescript
439
import { useMediaQuery, useTheme } from "@mui/material";
440

441
function ResponsiveComponent() {
442
  const theme = useTheme();
443
  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
444
  const isLarge = useMediaQuery(theme.breakpoints.up('lg'));
445
  
446
  return (
447
    <Box
448
      sx={{
449
        p: isMobile ? 1 : 3,
450
        display: {
451
          xs: 'block',
452
          md: 'flex',
453
        },
454
        flexDirection: {
455
          md: 'row',
456
          lg: 'column',
457
        },
458
      }}
459
    >
460
      <Typography variant={isMobile ? 'h6' : 'h4'}>
461
        {isLarge ? 'Large Screen' : 'Regular Screen'}
462
      </Typography>
463
    </Box>
464
  );
465
}
466
```
467

468
### CSS Utilities
469

470
```typescript { .api }
471
/**
472
 * CSS-in-JS function
473
 */
474
function css(template: TemplateStringsArray, ...args: any[]): SerializedStyles;
475

476
/**
477
 * Keyframes for animations
478
 */
479
function keyframes(template: TemplateStringsArray, ...args: any[]): Keyframes;
480

481
/**
482
 * Global styles component
483
 * @param props - GlobalStyles configuration
484
 * @returns GlobalStyles component
485
 */
486
function GlobalStyles(props: GlobalStylesProps): JSX.Element;
487

488
interface GlobalStylesProps {
489
  styles: CSSObject | string | ((theme: Theme) => CSSObject | string);
490
}
491
```
492

493
**Usage Examples:**
494

495
```typescript
496
import { GlobalStyles, keyframes } from "@mui/material";
497

498
// Keyframe animation
499
const fadeIn = keyframes`
500
  from {
501
    opacity: 0;
502
  }
503
  to {
504
    opacity: 1;
505
  }
506
`;
507

508
// Global styles
509
<GlobalStyles
510
  styles={{
511
    '*': {
512
      boxSizing: 'border-box',
513
    },
514
    html: {
515
      fontSize: '16px',
516
    },
517
    body: {
518
      margin: 0,
519
      fontFamily: '"Roboto", sans-serif',
520
    },
521
  }}
522
/>
523

524
// Theme-aware global styles
525
<GlobalStyles
526
  styles={(theme) => ({
527
    '.custom-class': {
528
      color: theme.palette.primary.main,
529
      padding: theme.spacing(2),
530
    },
531
  })}
532
/>
533
```