GitHub user dosubot[bot] added a comment to the discussion: Upgrading from version 5 to 6 has broken CSS updates
<!-- Greeting --> Hi @TraceMe365! I'm [Dosu](https://go.dosu.dev/dosubot) and I’m helping the superset team. <!-- Answer --> 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](https://github.com/apache/superset/pull/31590) [wiki](https://github.com/apache/superset/wiki/Frontend-Style-Guidelines). 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](https://github.com/apache/superset/issues/32847). - 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](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset/css_templates/api.py#L48-L161). - 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](https://github.com/apache/superset/issues/36878). - 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](https://github.com/apache/superset/issues/32847). - For advanced theming, keep an eye on the Superset theming roadmap—per-component theming via tokens is planned but not fully available yet [issue](https://github.com/apache/superset/issues/36842). For practical examples and selector strategies, see these guides: - [Customizing Superset dashboards with CSS](https://preset.io/blog/customizing-superset-dashboards-with-css/) - [Additional CSS tips and tricks](https://preset.io/blog/customizing-apache-superset-dashboards-with-css-additional-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. <!-- Dosu Comment Footer --> *To reply, just mention [@dosu](https://go.dosu.dev/dosubot).* --- <sup>How did I do? [Good](https://app.dosu.dev/response-feedback/a77973e7-4fbf-4ed6-afa9-14bbb50b3868?feedback_type=great_response) | [Irrelevant](https://app.dosu.dev/response-feedback/a77973e7-4fbf-4ed6-afa9-14bbb50b3868?feedback_type=irrelevant_answer) | [Incorrect](https://app.dosu.dev/response-feedback/a77973e7-4fbf-4ed6-afa9-14bbb50b3868?feedback_type=incorrect_sources) | [Verbose](https://app.dosu.dev/response-feedback/a77973e7-4fbf-4ed6-afa9-14bbb50b3868?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/a77973e7-4fbf-4ed6-afa9-14bbb50b3868?feedback_type=hallucination) | [Report 🐛](https://app.dosu.dev/response-feedback/a77973e7-4fbf-4ed6-afa9-14bbb50b3868?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/a77973e7-4fbf-4ed6-afa9-14bbb50b3868?feedback_type=other)</sup> [](https://app.dosu.dev/a28d3c7e-a9d3-459e-9fb6-3a6f9ff4f357/ask?utm_source=github) [](https://cursor.com/link/prompt?text=Superset%20v6%20introduced%20a%20major%20frontend%20overhaul%3A%20it%20migrated%20to%20Ant%20Design%20v5%2C%20switched%20to%20Emotion%20for%20CSS-in-JS%2C%20and%20removed%20Bootstrap.%20This%20changed%20many%20CSS%20class%20names%20and%20the%20DOM%20structure%2C%20which%20is%20why%20your%20custom%20CSS%20overrides%20broke%20after%20upgrading%C2%A0%5Bdetails%5D%28https%3A//github.com/apache/superset/pull/31590%29%C2%A0%5Bwiki%5D%28https%3A//github.com/apache/superset/wiki/Frontend-Style-Guidelines%29.%0A%0ATo%20keep%20your%20CSS%20consistent%2C%20you%E2%80%99ll%20need%20to%20update%20your%20custom%20CSS%20to%20match%20the%20new%20DOM%20and%20class%20names.%20The%20best%20practices%20are%3A%0A%0A-%20Avoid%20targeting%20dynamically%20generated%20class%20 names%20%28like%20%60.css-x36kch%60%29%2C%20since%20these%20can%20change%20with%20every%20build.%20Instead%2C%20use%20stable%20selectors%20such%20as%20chart%20IDs%20%28e.g.%2C%20%60%23chart-id-123%60%29%2C%20%60data-test%60%20attributes%2C%20or%20general%20chart/container%20classes%C2%A0%5Bdiscussion%5D%28https%3A//github.com/apache/superset/issues/32847%29.%0A-%20Use%20the%20dashboard%20CSS%20editor%20or%20CSS%20templates%20%28the%20legacy%20CssTemplate%20feature%20is%20still%20supported%20and%20injected%20at%20render%20time%29%20to%20manage%20your%20custom%20styles%C2%A0%5Bcode%5D%28https%3A//github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset/css_templates/api.py%23L48-L161%29.%0A-%20For%20Ant%20Design%20components%20%28navigation%2C%20menus%2C%20buttons%2C%20etc.%29%2C%20you%20can%20use%20the%20theme%20config%20and%20global%20tokens%2C%20but%20dashboard%20and%20chart%20visuals%20still%20require%20CSS%20overrides%C2%A0%5Bissue%5D%28https%3A//github.c om/apache/superset/issues/36878%29.%0A-%20If%20your%20CSS%20isn%E2%80%99t%20taking%20effect%2C%20check%20for%20specificity%20issues%2C%20CSS%20load%20order%2C%20and%20the%20use%20of%20%60%21important%60%20%28Superset%E2%80%99s%20own%20styles%20sometimes%20use%20it%20too%29%C2%A0%5Bdiscussion%5D%28https%3A//github.com/apache/superset/issues/32847%29.%0A-%20For%20advanced%20theming%2C%20keep%20an%20eye%20on%20the%20Superset%20theming%20roadmap%E2%80%94per-component%20theming%20via%20tokens%20is%20planned%20but%20not%20fully%20available%20yet%C2%A0%5Bissue%5D%28https%3A//github.com/apache/superset/issues/36842%29.%0A%0AFor%20practical%20examples%20and%20selector%20strategies%2C%20see%20these%20guides%3A%0A-%20%5BCustomizing%20Superset%20dashboards%20with%20CSS%5D%28https%3A//preset.io/blog/customizing-superset-dashboards-with-css/%29%0A-%20%5BAdditional%20CSS%20tips%20and%20tricks%5D%28https%3A//preset.io/blog/customizing-apache-superset-dashboards-with-css-additional-tips-and-tricks/% 29%0A%0AAfter%20each%20upgrade%2C%20you%E2%80%99ll%20likely%20need%20to%20inspect%20the%20new%20DOM%20and%20adapt%20your%20selectors.%20Document%20your%20customizations%20and%20test%20them%20after%20upgrades%20to%20minimize%20breakage.) [](https://go.dosu.dev/discord-bot) [](https://twitter.com/intent/tweet?text=%40dosu_ai%20helped%20me%20solve%20this%20issue!&url=https%3A//github.com/apache/superset/discussions/37504) GitHub link: https://github.com/apache/superset/discussions/37504#discussioncomment-15624072 ---- This is an automatically sent email for [email protected]. To unsubscribe, please send an email to: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
