0
# MakeStyles API
1

2
The MakeStyles API provides a React hook-based styling solution compatible with Material-UI v4 patterns. It offers theme integration, dynamic style generation, and seamless migration from @material-ui/core makeStyles.
3

4
## Capabilities
5

6
### MakeStyles Factory Function
7

8
Creates a makeStyles function with theme support and optional custom cache configuration.
9

10
```typescript { .api }
11
/**
12
 * Creates a makeStyles function with theme support
13
 * @param params - Configuration object with theme provider and optional cache
14
 * @returns Object containing makeStyles function and TssCacheProvider component
15
 */
16
function createMakeStyles<Theme>(params: {
17
  useTheme: () => Theme;
18
  cache?: EmotionCache;
19
}): {
20
  makeStyles<Params = void, RuleNameSubsetReferencableInNestedSelectors extends string = never>(
21
    params?: { name?: string | Record<string, unknown>; uniqId?: string }
22
  ): MakeStylesFunction<Theme, Params, RuleNameSubsetReferencableInNestedSelectors>;
23
  TssCacheProvider: React.ComponentType<{ children: ReactNode }>;
24
};
25

26
type MakeStylesFunction<Theme, Params, RuleNameSubsetReferencableInNestedSelectors> = (
27
  cssObjectByRuleNameOrGetCssObjectByRuleName:
28
    | Record<string, CSSObject>
29
    | ((theme: Theme, params: Params, classes: Record<RuleNameSubsetReferencableInNestedSelectors, string>) => Record<string, CSSObject>)
30
) => (params: Params) => {
31
  classes: Record<string, string>;
32
  cx: Cx;
33
  css: Css;
34
  theme: Theme;
35
};
36
```
37

38
**Usage Examples:**
39

40
```typescript
41
import { useTheme } from "@mui/material/styles";
42
import { createMakeStyles } from "tss-react";
43

44
// Create makeStyles with MUI theme
45
const { makeStyles, TssCacheProvider } = createMakeStyles({
46
  useTheme
47
});
48

49
// Custom cache configuration
50
import createCache from "@emotion/cache";
51

52
const customCache = createCache({
53
  key: "my-styles",
54
  prepend: true
55
});
56

57
const { makeStyles: makeStylesWithCache } = createMakeStyles({
58
  useTheme,
59
  cache: customCache
60
});
61
```
62

63
### MakeStyles Hook Creation
64

65
Creates a React hook that generates styles based on theme and optional parameters.
66

67
```typescript { .api }
68
/**
69
 * Creates a styles hook with optional parameters and nested selectors
70
 * @param params - Optional configuration for component name and unique ID
71
 * @returns Function that accepts CSS object or function and returns styles hook
72
 */
73
function makeStyles<
74
  Params = void,
75
  RuleNameSubsetReferencableInNestedSelectors extends string = never
76
>(params?: {
77
  name?: string | Record<string, unknown>;
78
  uniqId?: string;
79
}): (
80
  cssObjectByRuleNameOrGetCssObjectByRuleName:
81
    | Record<string, CSSObject>
82
    | ((
83
        theme: Theme,
84
        params: Params,
85
        classes: Record<RuleNameSubsetReferencableInNestedSelectors, string>
86
      ) => Record<string, CSSObject>)
87
) => UseStylesHook<Theme, Params>;
88

89
type UseStylesHook<Theme, Params> = Params extends void
90
  ? () => {
91
      classes: Record<string, string>;
92
      cx: Cx;
93
      css: Css;
94
      theme: Theme;
95
    }
96
  : (params: Params) => {
97
      classes: Record<string, string>;
98
      cx: Cx;
99
      css: Css;
100
      theme: Theme;
101
    };
102
```
103

104
**Usage Examples:**
105

106
```typescript
107
import { useTheme } from "@mui/material/styles";
108
import { createMakeStyles } from "tss-react";
109

110
const { makeStyles } = createMakeStyles({ useTheme });
111

112
// Static styles
113
const useStyles = makeStyles()({
114
  root: {
115
    backgroundColor: "white",
116
    padding: 16
117
  },
118
  button: {
119
    color: "primary",
120
    "&:hover": {
121
      backgroundColor: "rgba(0, 0, 0, 0.04)"
122
    }
123
  }
124
});
125

126
// Dynamic styles with theme
127
const useThemedStyles = makeStyles()(theme => ({
128
  root: {
129
    backgroundColor: theme.palette.background.paper,
130
    color: theme.palette.text.primary,
131
    padding: theme.spacing(2)
132
  },
133
  accent: {
134
    color: theme.palette.primary.main,
135
    fontWeight: theme.typography.fontWeightBold
136
  }
137
}));
138

139
// Parameterized styles
140
const useParameterizedStyles = makeStyles<{
141
  color: string;
142
  size: "small" | "medium" | "large";
143
}>()((theme, { color, size }) => ({
144
  root: {
145
    color,
146
    padding: {
147
      small: theme.spacing(1),
148
      medium: theme.spacing(2),
149
      large: theme.spacing(3)
150
    }[size]
151
  }
152
}));
153

154
// Named styles for debugging
155
const useNamedStyles = makeStyles({
156
  name: "MyComponent"
157
})({
158
  root: { padding: 16 }
159
});
160

161
// Usage in components
162
function MyComponent() {
163
  const { classes, cx, css, theme } = useStyles();
164
  
165
  return (
166
    <div className={classes.root}>
167
      <button className={cx(classes.button, css({ margin: theme.spacing(1) }))}>
168
        Click me
169
      </button>
170
    </div>
171
  );
172
}
173

174
function ParameterizedComponent({ variant }: { variant: "primary" | "secondary" }) {
175
  const { classes } = useParameterizedStyles({
176
    color: variant === "primary" ? "blue" : "gray",
177
    size: "medium"
178
  });
179
  
180
  return <div className={classes.root}>Content</div>;
181
}
182
```
183

184
### TSS Cache Provider
185

186
React component for providing custom Emotion cache configuration to the component tree.
187

188
```typescript { .api }
189
/**
190
 * React component for providing custom Emotion cache
191
 * @param props - Props containing children components
192
 * @returns JSX element wrapping children with cache provider
193
 */
194
interface TssCacheProvider extends React.ComponentType<{
195
  children: ReactNode;
196
}> {}
197
```
198

199
**Usage Examples:**
200

201
```typescript
202
import { createMakeStyles } from "tss-react";
203
import { useTheme } from "@mui/material/styles";
204

205
const { makeStyles, TssCacheProvider } = createMakeStyles({ useTheme });
206

207
function App() {
208
  return (
209
    <TssCacheProvider>
210
      <MyComponentTree />
211
    </TssCacheProvider>
212
  );
213
}
214
```
215

216
### Migration from Material-UI v4
217

218
The makeStyles API is designed for seamless migration from @material-ui/core v4:
219

220
```typescript
221
// Before (Material-UI v4)
222
import { makeStyles } from "@material-ui/core/styles";
223

224
const useStyles = makeStyles(theme => ({
225
  root: {
226
    backgroundColor: theme.palette.background.paper,
227
    padding: theme.spacing(2)
228
  }
229
}));
230

231
// After (TSS-React)
232
import { createMakeStyles } from "tss-react";
233
import { useTheme } from "@mui/material/styles";
234

235
const { makeStyles } = createMakeStyles({ useTheme });
236

237
const useStyles = makeStyles()(theme => ({
238
  root: {
239
    backgroundColor: theme.palette.background.paper,
240
    padding: theme.spacing(2)
241
  }
242
}));
243
```
244

245
### Advanced Patterns
246

247
#### Nested Selectors with Classes Reference
248

249
```typescript
250
const useNestedStyles = makeStyles<
251
  void,
252
  "root" | "button" | "icon"
253
>()((theme, params, classes) => ({
254
  root: {
255
    padding: theme.spacing(2),
256
    [`& .${classes.button}`]: {
257
      marginBottom: theme.spacing(1)
258
    },
259
    [`& .${classes.icon}`]: {
260
      marginRight: theme.spacing(0.5)
261
    }
262
  },
263
  button: {
264
    backgroundColor: theme.palette.primary.main,
265
    color: theme.palette.primary.contrastText
266
  },
267
  icon: {
268
    fontSize: 16
269
  }
270
}));
271
```
272

273
#### Media Queries and Breakpoints
274

275
```typescript
276
const useResponsiveStyles = makeStyles()(theme => ({
277
  root: {
278
    padding: theme.spacing(1),
279
    [theme.breakpoints.up("md")]: {
280
      padding: theme.spacing(2)
281
    },
282
    [theme.breakpoints.up("lg")]: {
283
      padding: theme.spacing(3)
284
    }
285
  }
286
}));
287
```
288

289
#### Dynamic Properties with Props
290

291
```typescript
292
interface StyleProps {
293
  variant: "outlined" | "filled";
294
  disabled: boolean;
295
}
296

297
const useDynamicStyles = makeStyles<StyleProps>()(
298
  (theme, { variant, disabled }) => ({
299
    root: {
300
      border: variant === "outlined" ? `1px solid ${theme.palette.divider}` : "none",
301
      backgroundColor: variant === "filled" ? theme.palette.action.hover : "transparent",
302
      opacity: disabled ? 0.5 : 1,
303
      cursor: disabled ? "not-allowed" : "pointer"
304
    }
305
  })
306
);
307
```
308

309
### Utility Returns
310

311
The makeStyles hook returns several utility functions alongside the generated classes:
312

313
```typescript { .api }
314
interface MakeStylesReturn<Theme> {
315
  /** Generated CSS class names keyed by rule name */
316
  classes: Record<string, string>;
317
  /** Classname combination utility function */
318
  cx: Cx;
319
  /** CSS-in-JS function for inline styles */
320
  css: Css;
321
  /** Current theme object */
322
  theme: Theme;
323
}
324

325
type Cx = (...classNames: CxArg[]) => string;
326

327
interface Css {
328
  (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
329
  (...args: CSSInterpolation[]): string;
330
}
331
```
332

333
**Usage Examples:**
334

335
```typescript
336
function StyledComponent() {
337
  const { classes, cx, css, theme } = useStyles();
338
  
339
  return (
340
    <div className={classes.root}>
341
      <span 
342
        className={cx(
343
          classes.text,
344
          css({
345
            fontSize: theme.typography.h6.fontSize,
346
            marginTop: theme.spacing(1)
347
          })
348
        )}
349
      >
350
        Combined styles
351
      </span>
352
    </div>
353
  );
354
}
355
```
356

357
### Combined Factory Function
358

359
Creates both makeStyles and withStyles functions together with a shared cache provider. This is a convenience function for applications that need both APIs.
360

361
```typescript { .api }
362
/**
363
 * Creates makeStyles and withStyles functions with shared configuration
364
 * @param params - Configuration object with theme hook and optional cache
365
 * @returns Object containing makeStyles, withStyles, and TssCacheProvider
366
 */
367
function createMakeAndWithStyles<Theme>(params: {
368
  useTheme: () => Theme;
369
  cache?: EmotionCache;
370
}): {
371
  makeStyles: MakeStylesFunction<Theme>;
372
  withStyles: WithStylesFunction<Theme>;
373
  TssCacheProvider: React.ComponentType<{ children: ReactNode }>;
374
};
375
```
376

377
**Usage Examples:**
378

379
```typescript
380
import { createMakeAndWithStyles } from "tss-react";
381
import { useTheme } from "@mui/material/styles";
382

383
// Create both APIs together
384
const { makeStyles, withStyles, TssCacheProvider } = createMakeAndWithStyles({
385
  useTheme
386
});
387

388
// Use makeStyles for hook-based styling
389
const useCardStyles = makeStyles()(theme => ({
390
  root: {
391
    backgroundColor: theme.palette.background.paper,
392
    padding: theme.spacing(2),
393
    borderRadius: theme.shape.borderRadius
394
  },
395
  title: {
396
    color: theme.palette.text.primary,
397
    fontSize: theme.typography.h5.fontSize,
398
    marginBottom: theme.spacing(1)
399
  }
400
}));
401

402
// Use withStyles for HOC-based styling
403
const StyledButton = withStyles("button", theme => ({
404
  root: {
405
    backgroundColor: theme.palette.primary.main,
406
    color: theme.palette.primary.contrastText,
407
    padding: theme.spacing(1, 2),
408
    border: "none",
409
    borderRadius: theme.shape.borderRadius,
410
    cursor: "pointer",
411
    "&:hover": {
412
      backgroundColor: theme.palette.primary.dark
413
    }
414
  }
415
}));
416

417
function App() {
418
  return (
419
    <TssCacheProvider>
420
      <MyApp />
421
    </TssCacheProvider>
422
  );
423
}
424

425
function MyCard() {
426
  const { classes } = useCardStyles();
427
  
428
  return (
429
    <div className={classes.root}>
430
      <h2 className={classes.title}>Card Title</h2>
431
      <StyledButton>Action Button</StyledButton>
432
    </div>
433
  );
434
}
435
```
436

437
This combined approach is particularly useful for:
438

439
- **Migration Scenarios**: When transitioning from Material-UI v4 and need both makeStyles and withStyles
440
- **Mixed Component Patterns**: Applications using both hook-based and HOC-based styling approaches
441
- **Component Libraries**: Libraries that provide multiple styling APIs for different use cases
442
- **Consistency**: Ensuring both APIs use the same theme and cache configuration
443

444
**With Custom Cache:**
445

446
```typescript
447
import createCache from "@emotion/cache";
448

449
const customCache = createCache({
450
  key: "app-styles",
451
  prepend: true,
452
  speedy: process.env.NODE_ENV === "production"
453
});
454

455
const { makeStyles, withStyles, TssCacheProvider } = createMakeAndWithStyles({
456
  useTheme,
457
  cache: customCache
458
});
459
```