CODEWITHSUNDEEP
reactjsmaterial-ui
Plumpie
Plumpie

Reputation: 466

How to replace a component in a MaterialUI component?

MaterialUI has styling functionality but it's also possible to customize a component by replacing a subcomponent.

For example, the MaterialUI documentation on <Slider> links to a CodeSandbox where the <Thumb>-component is swapped out.

But it's not really clear to me what's happening here, and I can't find any documentation, examples or tutorials on how to do that for other components.

How should I proceed when for example I want to replace the <Track> component? To be clear, I know how to swap out a component (that's clear form the <Thumb> component but I feel like I'm missing documentation on what to replace it by.

Upvotes: 0

Views: 439

Answers (1)

Summer
Summer

Reputation: 1291

Slider has a components prop. Specifically:

components?: {
  Root?: React.ElementType;
  Track?: React.ElementType;
  Rail?: React.ElementType;
  Thumb?: React.ElementType;
  Mark?: React.ElementType;
  MarkLabel?: React.ElementType;
  ValueLabel?: React.ElementType;
};

The Airbnb component in the example has components={{ Thumb: AirbnbThumbComponent }}. If you want to replace the Track instead, all you need to do is:

function MyCustomTrackComponent() {
  /* ... */
}

<Slider components={{ Track: MyCustomTrackComponent }} />

Upvotes: 1

Related Questions