The Overlay is a simple component that normally will cover the entire screen
while some other more prominent material (such as dialogs or drawers) are
visible on the page to help the user know where their main focus should be. The
Overlay will animate in and out based on the visible prop.
If you attempt to render an overlay within a fixed element or a container that
has overflow set to the non-default value, the overlay might be contained
within that element and not cover the entire page. To work around this, the
Overlay component has also been updated to work with the @react-md/portal component it
can be portalled out of this container element and still cover the entire page.
The example below is a very simple version of something that might happen within your app where you have some fixed container and another overlay within it. Until the portal is enabled, the overlay will only cover 50% of the screen instead of the entire page and some elements will not be correctly covered due to z-indexing. Once the portal is enabled, it will cover the entire page again correctly.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et eros in augue fermentum tempus. Aliquam ullamcorper ullamcorper bibendum. Etiam finibus, ante a mattis semper, quam orci porttitor ante, quis imperdiet felis urna quis ipsum. Curabitur fringilla iaculis tellus eu pharetra. Donec fringilla nisl eu metus tempus viverra. Morbi commodo lobortis magna. Vivamus dictum commodo condimentum. Nullam molestie urna est, in fermentum ipsum tincidunt at. Etiam lectus nunc, lacinia in mollis non, cursus eget lacus. Donec cursus, neque eget auctor pretium, felis nisi semper mi, elementum vehicula libero lectus et felis. Cras magna orci, pellentesque non lectus at, luctus rhoncus lorem. Nam varius eleifend eros non mollis.
Vestibulum at feugiat eros. Maecenas commodo sapien quis dignissim elementum. Duis id magna sit amet purus tempus luctus eleifend eget risus. Duis efficitur orci ut est luctus, eu molestie velit sagittis. Duis faucibus varius fringilla. Vestibulum congue tempor felis placerat gravida. Cras id est purus.
The overlay is also themeable for the background-color and z-index values.
To update these values, you can use the rmd-overlay-theme mixin.