Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

334
Views
What is the usage of componentsProps in Material-UI components?

I have seen this componentsProps in the API documentation of components such as AutoComplete, StepLabel, BackDrop, etc...., I didn't get any best example and perfect definition of the prop.

Anyone please explain it with basic and simple example in easy words that when, why and how it is used!

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

MUI exposes componentsProps on some components to let you override the props of the inner components. Specifically:

  • In Autocomplete component, it's used to override the AutocompleteClearIndicator props.

  • In StepLabel, it's used to override the label component (exclude the icon). Also note that the API is not inconsistent as @Drew Reese pointed out, you can only override the label props with componentsProps, but to override the icon props, you have to use StepIconProps prop instead.

  • In some other components like Menu, there is no componentsProp but TransitionProps and MenuListProps props to override the components inside individually.

Unfortunately, because there the prop is untyped (all marked as object), and there is no mention anywhere else in the docs. You have to dive into the source code to know what the componentsProps in a specific component does.

Below is the example of the Autocomplete component with the clear indicator removed. Note that you can do that with disableClearable in Autocomplete, this is just an example to demonstrate how the componentsProp can potentially be useful:

<Autocomplete
  componentsProps={{
    clearIndicator: {
      sx: {
        display: "none"
      }
    }
  }}
  options={top100Films}
  sx={{ width: 300 }}
  renderInput={(params) => <TextField {...params} label="Movie" />}
/>

Codesandbox Demo

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!