Renders white or dark background depending on color scheme
Paper is the most basic ui component
Use it to create cards, dropdowns, modals and other components that require background with shadow
Paper is a polymorphic component – its default root element is div , but it can be changed to any other element or component with the component prop:
You can also use components in the component prop, for example, Next.js Link :
Polymorphic components with TypeScript
Note that polymorphic component prop types are different from regular components – they do not extend HTML element props of the default element. For example, Paper Props does not extend React.ComponentProps '<' div '>' although div is the default element.
If you want to create a wrapper for a polymorphic component that is not polymorphic (does not support the component prop), then your component props interface should extend HTML element props, for example:
If you want your component to remain polymorphic after wrapping, use the polymorphic function described in this guide .