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?
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:
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:
The latter is indeed passed as "inline":
Question
➥ How to enforce my CSS?