MUI Slots & slotProps API

The slots/slotProps pattern is MUI's primary mechanism for deep component customization. It lets you replace internal sub-components, inject custom renderers, and pass props to every layer of a compound component without wrapper hacks.

1. What Are Slots?

Every compound MUI component is built from smaller internal elements. The slots prop lets you swap any of those internal elements with your own component. The slotProps prop lets you pass additional props to each slot — whether you replaced it or not.

// Before (MUI v5 — deprecated)
<Autocomplete
  PaperComponent={CustomPaper}
  componentsProps={{ paper: { elevation: 8 } }}
/>

// After (MUI v6+ — slots API)
<Autocomplete
  slots={{ paper: CustomPaper }}
  slotProps={{ paper: { elevation: 8 } }}