0
# CSS Class and Style Utilities
1

2
Utilities for CSS class name generation, composition, and styling management in component libraries. These utilities are essential for theming and consistent styling systems.
3

4
## Capabilities
5

6
### Class Name Generation
7

8
#### generateUtilityClass
9

10
Generates standardized utility CSS class names for component slots.
11

12
```typescript { .api }
13
/**
14
 * Generates utility CSS class names
15
 * @param componentName - Name of the component
16
 * @param slot - Name of the component slot
17
 * @param globalStatePrefix - Optional prefix for global state classes
18
 * @returns Generated class name string
19
 */
20
function unstable_generateUtilityClass(
21
  componentName: string,
22
  slot: string,
23
  globalStatePrefix?: string
24
): string;
25

26
/**
27
 * Checks if a class name represents a global state
28
 * @param globalStateClass - Class name to check
29
 * @returns True if class represents global state
30
 */
31
function unstable_isGlobalState(globalStateClass: string): boolean;
32

33
/**
34
 * Type representing keys of global state classes
35
 */
36
type GlobalStateSlot = keyof typeof globalStateClasses;
37

38
/**
39
 * Object mapping global state slot names to their corresponding class names
40
 */
41
const globalStateClasses: {
42
  active: 'active';
43
  checked: 'checked';
44
  completed: 'completed';
45
  disabled: 'disabled';
46
  error: 'error';
47
  expanded: 'expanded';
48
  focused: 'focused';
49
  focusVisible: 'focusVisible';
50
  open: 'open';
51
  readOnly: 'readOnly';
52
  required: 'required';
53
  selected: 'selected';
54
};
55
```
56

57
**Usage Example:**
58

59
```typescript
60
import { 
61
  unstable_generateUtilityClass as generateUtilityClass,
62
  unstable_isGlobalState as isGlobalState,
63
  GlobalStateSlot,
64
  globalStateClasses
65
} from '@mui/utils';
66

67
// Basic class generation
68
const rootClass = generateUtilityClass('MuiButton', 'root');
69
// Result: 'MuiButton-root'
70

71
const labelClass = generateUtilityClass('MuiButton', 'label');
72
// Result: 'MuiButton-label'
73

74
// Global state classes
75
const disabledClass = generateUtilityClass('MuiButton', 'disabled', 'Mui');
76
// Result: 'Mui-disabled'
77

78
// Check if class is global state
79
const isGlobal = isGlobalState('Mui-disabled'); // true
80
const isNotGlobal = isGlobalState('MuiButton-root'); // false
81

82
// Using global state definitions
83
const activeSlot: GlobalStateSlot = 'active';
84
const activeClassName = globalStateClasses.active; // 'active'
85
```
86

87
#### generateUtilityClasses
88

89
Generates multiple utility classes for a component at once.
90

91
```typescript { .api }
92
/**
93
 * Generates multiple utility classes
94
 * @param componentName - Name of the component
95
 * @param slots - Array of slot names
96
 * @param globalStatePrefix - Optional prefix for global state classes
97
 * @returns Record mapping slot names to class names
98
 */
99
function unstable_generateUtilityClasses<T extends string>(
100
  componentName: string,
101
  slots: T[],
102
  globalStatePrefix?: string
103
): Record<T, string>;
104
```
105

106
**Usage Example:**
107

108
```typescript
109
import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
110

111
const buttonClasses = generateUtilityClasses('MuiButton', [
112
  'root',
113
  'label',
114
  'disabled',
115
  'focusVisible'
116
]);
117

118
// Result:
119
// {
120
//   root: 'MuiButton-root',
121
//   label: 'MuiButton-label', 
122
//   disabled: 'MuiButton-disabled',
123
//   focusVisible: 'MuiButton-focusVisible'
124
// }
125
```
126

127
### Class Composition
128

129
#### composeClasses
130

131
Composes CSS class names for component slots, merging utility classes with custom classes.
132

133
```typescript { .api }
134
/**
135
 * Composes CSS class names for component slots
136
 * @param slots - Object mapping slot names to default classes
137
 * @param getUtilityClass - Function to get utility class for slot
138
 * @param classes - Optional custom classes to merge
139
 * @returns Record mapping slot names to composed class names
140
 */
141
function unstable_composeClasses<SlotKey extends string>(
142
  slots: Record<SlotKey, string | false | null | undefined>,
143
  getUtilityClass: (slot: SlotKey) => string,
144
  classes?: Partial<Record<SlotKey, string>>
145
): Record<SlotKey, string>;
146
```
147

148
**Usage Example:**
149

150
```typescript
151
import { unstable_composeClasses as composeClasses } from '@mui/utils';
152

153
const slots = {
154
  root: 'base-button',
155
  label: 'base-label',
156
  disabled: null // Will be excluded
157
};
158

159
const getUtilityClass = (slot) => `MuiButton-${slot}`;
160

161
const customClasses = {
162
  root: 'custom-button-root',
163
  label: 'custom-label'
164
};
165

166
const composedClasses = composeClasses(slots, getUtilityClass, customClasses);
167

168
// Result:
169
// {
170
//   root: 'base-button MuiButton-root custom-button-root',
171
//   label: 'base-label MuiButton-label custom-label'
172
// }
173
```
174

175
### Global Class Name Configuration
176

177
#### ClassNameGenerator
178

179
Global configuration for class name generation across the entire application.
180

181
```typescript { .api }
182
/**
183
 * Global class name generator configuration
184
 */
185
const unstable_ClassNameGenerator: {
186
  /**
187
   * Configure custom class name generator
188
   * @param generator - Function to generate class names
189
   */
190
  configure: (generator: (componentName: string, slot?: string) => string) => void;
191
  
192
  /**
193
   * Generate class name using current configuration
194
   * @param componentName - Component name
195
   * @param slot - Optional slot name
196
   * @returns Generated class name
197
   */
198
  generate: (componentName: string, slot?: string) => string;
199
  
200
  /**
201
   * Reset to default class name generation
202
   */
203
  reset: () => void;
204
};
205
```
206

207
**Usage Example:**
208

209
```typescript
210
import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/utils';
211

212
// Configure custom class name generation
213
ClassNameGenerator.configure((componentName, slot) => {
214
  return slot ? `${componentName}--${slot}` : componentName;
215
});
216

217
// Now all class generation will use the custom format
218
const className = ClassNameGenerator.generate('MyButton', 'root');
219
// Result: 'MyButton--root'
220

221
// Reset to default behavior
222
ClassNameGenerator.reset();
223
```
224

225
### Accessibility Styles
226

227
#### visuallyHidden
228

229
CSS-in-JS styles for content that should be hidden visually but accessible to screen readers.
230

231
```typescript { .api }
232
/**
233
 * CSS styles for visually hidden content
234
 */
235
const visuallyHidden: React.CSSProperties;
236
```
237

238
**Usage Example:**
239

240
```typescript
241
import { visuallyHidden } from '@mui/utils';
242

243
function AccessibleButton({ children, ariaLabel }) {
244
  return (
245
    <button aria-label={ariaLabel}>
246
      <span style={visuallyHidden}>{ariaLabel}</span>
247
      {children}
248
    </button>
249
  );
250
}
251

252
// Or with styled components
253
const HiddenText = styled('span')(visuallyHidden);
254
```