You have a component deep inside a layout but need to ensure that a modal opened from this component renders directly under the body tag, ensuring it's not affected by the CSS of parent containers. Which approach would you take in React?

To ensure that a modal renders directly under the body tag and is not affected by parent CSS, you should use React Portals. Portals allow you to render a component at a different DOM location, making it appear outside the DOM hierarchy of parent containers, thus avoiding any CSS interference. This is commonly used for modals and overlays.