Repository navigation
The problem of CSS template not taking effect #32847
Description
Bug description
When I was using CSS templates, I couldn't figure out why the styles I modified wouldn't take effect no matter how I did it. My requirement was to change the background color to black. Here is my CSS code:
.ant-tabs-content-holder{
background: transparent !important;
}
.ant-tabs-content-holder * {
color: #fff !important;
}
.ant-tabs-tab-active *{
font-weight: bold !important;
}
.dashboard-content{
background-image: linear-gradient(-45deg, #111, #222);
font-family: 'Inter', sans-serif;
}
.dashboard-component{
background-image: linear-gradient(-45deg, #2f2f2f, #202020);
border-radius: 10px;
box-shadow: 0 0 20px rgba(0,0,0,.7) !important;
}
.dashboard-component-tabs{
background: transparent;
box-shadow: none !important;
}
Screenshots/recordings
Superset version
master / latest-dev
Python version
3.9
Node version
16
Browser
Chrome
Additional context
No response
Checklist
- I have searched Superset docs and Slack and didn't find a solution to my problem.
- I have searched the GitHub issue tracker and didn't find a similar bug report.
- I have checked Superset's logs for errors and if I found a relevant Python stacktrace, I included it here as text in the "additional context" section.
Activity
dosubot commentedon Mar 25, 2025
Hey @shexiaobin! 👋 I'm here to help you with any bugs, questions, or contributions you have for the project. Let's tackle this CSS issue together! Dosu
To address the issue of your CSS styles not taking effect in Superset, consider the following points:
CSS Specificity and Order: Ensure that your custom CSS is loaded after any default or global styles that might be overriding it. In Superset, the order of CSS file loading can affect which styles take precedence. Custom styles should be included in the
entryCSS bundle or after the theme CSS bundle to ensure they are applied correctly [1].Existing CSS Rules: Superset has existing CSS rules that might override your custom styles. The
superset-frontend/src/GlobalStyles.tsxfile defines global styles that could affect your custom styles, especially if they target the same elements [2].Use of
!important: While you are using!importantin your styles, ensure that it is necessary and correctly applied. Superset also uses!importantin some of its styles, which might conflict with your custom styles [2].Dynamic Style Modifications: Superset uses JavaScript to dynamically modify styles at runtime, such as changing the
relattribute of<link>elements frompreloadtostylesheet. Ensure that your styles are not being affected by such scripts [1].Specific Class Styles: The
.ant-tabs-content-holderand.dashboard-component-tabsclasses have specific styles defined in Superset's codebase, which might be affecting your custom styles. For instance,.ant-tabs-content-holderis styled withoverflow: visibleoroverflow: autobased on certain conditions [3][4].By considering these factors, you can better understand why your custom CSS might not be taking effect and make the necessary adjustments.
To continue talking to Dosu, mention @dosu.
Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other
rusackas commentedon Apr 1, 2025
There are a lot of little yellow triangles pointing to either errors or warnings, if any of them help, though the CSS syntax looks OK at a glance. Probably some issues about spaces after the selector and before the opening brackets, stuff like that.
I have a couple blog posts on common tips and tricks for this stuff, but if you let us know a bit more about what you're trying to accomplish, maybe I/we can help.
https://preset.io/blog/customizing-superset-dashboards-with-css/
https://preset.io/blog/customizing-apache-superset-dashboards-with-css-additional-tips-and-tricks/
Closing this for now, since I don't think it's a bug but we can move it to a Discussion if you want further help, chat on Slack, or re-open this if I'm missing something.