Upgrading from version 5 to 6 has broken CSS updates

[TraceMe365]

After upgrading Apache Superset from version 5 to version 6, custom and application CSS changes have changed, including the classes of some cards. Is there a way to keep the CSS consistent.
SupersetCSS.txt

[dosubot[bot]]

Hi @TraceMe365! I'm Dosu and I’m helping the superset team.

Superset v6 introduced a major frontend overhaul: it migrated to Ant Design v5, switched to Emotion for CSS-in-JS, and removed Bootstrap. This changed many CSS class names and the DOM structure, which is why your custom CSS overrides broke after upgrading details wiki.

To keep your CSS consistent, you’ll need to update your custom CSS to match the new DOM and class names. The best practices are:

• Avoid targeting dynamically generated class names (like .css-x36kch), since these can change with every build. Instead, use stable selectors such as chart IDs (e.g., #chart-id-123), data-test attributes, or general chart/container classes discussion.
• Use the dashboard CSS editor or CSS templates (the legacy CssTemplate feature is still supported and injected at render time) to manage your custom styles code.
• For Ant Design components (navigation, menus, buttons, etc.), you can use the theme config and global tokens, but dashboard and chart visuals still require CSS overrides issue.
• If your CSS isn’t taking effect, check for specificity issues, CSS load order, and the use of !important (Superset’s own styles sometimes use it too) discussion.
• For advanced theming, keep an eye on the Superset theming roadmap—per-component theming via tokens is planned but not fully available yet issue.

For practical examples and selector strategies, see these guides:

• Customizing Superset dashboards with CSS
• Additional CSS tips and tricks

After each upgrade, you’ll likely need to inspect the new DOM and adapt your selectors. Document your customizations and test them after upgrades to minimize breakage.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[TraceMe365]

Is there a one time way to add the CSS without changing the selectors in every update.

[dosubot[bot]]

There isn’t a built-in way in Superset to add custom CSS just once and have it survive all future upgrades without ever needing to update selectors. Superset’s frontend uses dynamically generated class names (via Emotion and Ant Design), and major upgrades often change the DOM and class structure, which breaks CSS that targets those classes or elements. Even if you use persistent CSS templates or the dashboard CSS editor, you’ll still need to adapt your selectors after upgrades that change the DOM or class names (source).

To minimize breakage, use the most stable selectors available—like chart IDs, data-test attributes, or general container classes (e.g., .dashboard-content, .grid-container)—and avoid targeting generated class names (source). Superset is working toward more robust, token-based theming, but for now, updating selectors after major upgrades is unavoidable (source).

Best practice: document your customizations, use CSS templates for persistence, and plan to review selectors after each major upgrade.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}