Overlays parent element with div element with any color and opacity
Overlay takes 100% of the width and height of the parent container or viewport if the fixed prop is set. Set the color and backgroundOpacity props to change the Overlay background-color. Note that the backgroundOpacity prop does not change the CSS opacity property; it changes the background-color. For example, if you set color="#000" and backgroundOpacity={0.85} , the background-color will be rgba(0, 0, 0, 0.85) :
Set the gradient prop to use background-image instead of background-color. When the gradient prop is set, the color and backgroundOpacity props are ignored.
Set the blur prop to add backdrop-filter: blur({value}) styles. Note that backdrop-filter is not supported in all browsers .
Overlay 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, Overlay 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 .