Reset

Because the styleguide is used side-by-side with existing component styles, a reset is applied at the root of each CDS component. This reset is necessary because the current website styles apply a lot of styles directly to HTML elements, which would otherwise leak into CDS components.

Wrap every CDS component with .tng-root:

<div class="tng-root">…</div>

The reset also lands on a handful of known application roots automatically — the AEM Headless root ([data-app-root]), Storybook’s #storybook-root, and the Astro page body — so inside those hosts you usually get it for free.

Portals

React portals break that assumption. createPortal renders its subtree into a container elsewhere in the document — typically appended to <body> — which sits outside the detected application root. The reset never reaches it, so the legacy page styles it was meant to neutralise leak straight back into whatever the portal renders: dropdowns, dialogs, tooltips.

Give the portalled element its own .tng-root when you create it:

import { createPortal } from 'react-dom';

function Popover({ children }) {
  return createPortal(
    <div className="tng-root tng-popover">{children}</div>,
    document.body,
  );
}

Any DOM rendered outside your app’s root — a portal, a manually appended overlay node — needs .tng-root for the same reason.

Revert reset

When a legacy component is placed inside a tng-root container, the CDS reset will strip its expected styles. To restore the legacy styles for that component, wrap its root element with the tng-legacy-apply class.

<div class="tng-root">
  <!-- CDS components render normally -->
  <div class="tng-legacy-apply">
    <!-- Legacy component with legacy styles restored -->
  </div>
</div>

This is useful when you need to embed an existing legacy component within a new CDS layout and want it to retain its original styling.