Repository navigation
Local CSS is overridden by React-generated CSS #482
Description
Context
I'm trying to style various DCC elements — say multi-value dropdowns.
Problem
I am using Dash v0.31.0.
I add a css file to my project containing:
.Select--multi .Select-value {
background-color:#df0a0b;
}
I know the CSS is loaded as other rules (e.g. affecting h1) take effect.
However, for the dropdown, my own styles are overridden by the React select .ccs file — i.e. the file starting with:
/**
* React Select
* ============
* Created by Jed Watson and Joss Mackison for KeystoneJS, http://www.keystonejs.com/
* https://twitter.com/jedwatson https://twitter.com/jossmackison https://twitter.com/keystonejs
* MIT License: https://github.com/JedWatson/react-select
*/
.Select {
position: relative;
}
…
.Select--multi .Select-value {
background-color: #ebf5ff;
/* Fallback color for IE 8 */
background-color: rgba(0, 126, 255, 0.08);
border-radius: 2px;
border: 1px solid #c2e0ff;
/* Fallback color for IE 8 */
border: 1px solid rgba(0, 126, 255, 0.24);
color: #007eff;
display: inline-block;
font-size: 0.9em;
line-height: 1.4;
margin-left: 5px;
margin-top: 5px;
vertical-align: top;
}
…
The latter is indeed passed as "inline":
Question
➥ How to enforce my CSS?
Activity
EBoisseauSierra commentedon Dec 6, 2018
Quick and dirty fix: replace all
.Selectwithdiv.Selectto gain higher priority.valentijnnieman commentedon Dec 7, 2018
What version of
dash-core-componentsare you using? In plotly/dash-core-components#382 we fixed the issue where user supplied styles weren't overriding the React included styles.EBoisseauSierra commentedon Dec 10, 2018
@valentijnnieman indeed, I thought it would have been solved. But I made sure I'm using v0.39.0…
anandcu3 commentedon Mar 14, 2019
Same behavior in v0.42.1
mamay13 commentedon Apr 11, 2019
Same behavior in 0.45.0
only with imported dash_table
jjaraalm commentedon Apr 1, 2020
Same here with dash 1.9.1 using
dash_table. Custom CSS is applied correctly on page load, however I have dropdowns in one tab and tables in another. Switching to the table tab causes custom css to be overridde once I switch back.elastufka commentedon Mar 11, 2021
I also have this issue. Any solutions yet? I can't find the part in my CSS which controls the dropdown menu colors.
Limits0x commentedon Mar 26, 2021
I am having the exact same issue but with
dash_table. Any solutions yet?Geometrein commentedon Aug 6, 2021
Same issue with dcc.tabs.
The actual example that you provide on your website: Styling the Tabs component with CSS Classes contains this issue.
Any solutions yet?
Merge pull request plotly#482 from plotly/0.44.0-issue591
Xzyon commentedon Dec 16, 2022
Same behavior with dash-core-components ver. 2.0.0
React override local CSS of dropdown only when a dash_table is present.
@EBoisseauSierra 's trick works nicely
lance-noel commentedon Apr 19, 2023
I have the same problem with
.Select--multi .Select-valuebeing overwritten by react-selectndretex commentedon Dec 18, 2023
Hello, Is there any update on a permanent fix for this?
Thanks
Coding-with-Adam commentedon Dec 21, 2023
@ndretex are you referring to a CSS styling problem related to Dash Core Components or the Dash DataTable?
Can you share your code or sample code that recreates this problem?
at1047 commentedon Mar 18, 2024
Another quick and dirty fix, add !important to the css property you want to override
gvwilson commentedon Jul 25, 2024
Hi - we are tidying up stale issues and PRs in Plotly's public repositories so that we can focus on things that are most important to our community. If this issue is still a concern, please add a comment letting us know what recent version of our software you've checked it with so that I can reopen it and add it to our backlog. (Please note that we will give priority to reports that include a short reproducible example.) If you'd like to submit a PR, we'd be happy to prioritize a review, and if it's a request for tech support, please post in our community forum. Thank you - @gvwilson