0
# Slot and Props Utilities
1

2
Advanced prop management utilities for component slot patterns and dynamic prop resolution. These utilities enable sophisticated component composition and prop forwarding patterns.
3

4
## Capabilities
5

6
### Slot Props Management
7

8
#### useSlotProps
9

10
Hook for managing slot component props with advanced prop resolution and owner state integration.
11

12
```typescript { .api }
13
/**
14
 * Hook for managing slot component props
15
 * @param parameters - Slot props configuration
16
 * @returns Resolved slot props and internal ref
17
 */
18
function unstable_useSlotProps<TSlotComponent, TSlotState, TSlotOwnerState>(
19
  parameters: UseSlotPropsParameters<TSlotComponent, TSlotState, TSlotOwnerState>
20
): UseSlotPropsResult<TSlotComponent>;
21

22
interface UseSlotPropsParameters<TSlotComponent, TSlotState, TSlotOwnerState> {
23
  /** The element type for the slot */
24
  elementType: TSlotComponent;
25
  /** External props passed to the slot */
26
  externalSlotProps: any;
27
  /** Owner state for prop resolution */
28
  ownerState: TSlotOwnerState;
29
  /** Skip resolving slot props if true */
30
  skipResolvingSlotProps?: boolean;
31
  /** Additional props to merge */
32
  additionalProps?: any;
33
  /** Internal props for the slot */
34
  internalSlotProps?: any;
35
}
36

37
interface UseSlotPropsResult<TSlotComponent> {
38
  /** Resolved props for the slot component */
39
  props: React.ComponentPropsWithRef<TSlotComponent>;
40
  /** Internal ref for the slot */
41
  internalRef: React.Ref<any>;
42
}
43
```
44

45
**Usage Example:**
46

47
```typescript
48
import { unstable_useSlotProps as useSlotProps } from '@mui/utils';
49

50
function CustomButton({ 
51
  slots = {}, 
52
  slotProps = {},
53
  variant = 'contained',
54
  children,
55
  ...props 
56
}) {
57
  const ownerState = { variant };
58
  
59
  const Root = slots.root || 'button';
60
  const rootProps = useSlotProps({
61
    elementType: Root,
62
    externalSlotProps: slotProps.root,
63
    ownerState,
64
    additionalProps: {
65
      className: `custom-button custom-button-${variant}`,
66
      ...props
67
    }
68
  });
69

70
  return <Root {...rootProps.props} ref={rootProps.internalRef}>{children}</Root>;
71
}
72
```
73

74

75
## Types
76

77
```typescript { .api }
78
type SlotComponentProps<TSlotComponent extends React.ElementType, TOverrides, TOwnerState> =
79
  | (Partial<React.ComponentPropsWithRef<TSlotComponent>> & TOverrides)
80
  | ((ownerState: TOwnerState) => Partial<React.ComponentPropsWithRef<TSlotComponent>> & TOverrides);
81

82
type SlotComponentPropsWithSlotState<
83
  TSlotComponent extends React.ElementType,
84
  TOverrides,
85
  TOwnerState,
86
  TSlotState
87
> =
88
  | (Partial<React.ComponentPropsWithRef<TSlotComponent>> & TOverrides)
89
  | ((
90
      ownerState: TOwnerState,
91
      slotState: TSlotState,
92
    ) => Partial<React.ComponentPropsWithRef<TSlotComponent>> & TOverrides);
93

94
type WithOptionalOwnerState<Props extends { ownerState: unknown }> = Omit<
95
  Props,
96
  'ownerState'
97
> & Partial<Pick<Props, 'ownerState'>>;
98
```