Polymorphic Components in Material UI

Introduction

Material UI has been a staple of component libraries for years now. It’s a robust component library with a mature user base.

Similar to Chakra UI, Material UI allows for a polymorphic prop called component—though it doesn’t matter what we choose to call our polymorphic prop.

Note: Chakra UI calls its polymorphic prop as, and Material UI calls its polymorphic prop component. We can name our polymorphic prop whatever we think is appropriate.

The usage of the polymorphic prop is similar. We just pass it to a component, stating what element or custom component we’d like to render.

Material UI's polymorphic prop

Here’s an example from Material UI's official documentation: