Local CSS is overridden by React-generated CSS

[EBoisseauSierra]

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?

[EBoisseauSierra]

Quick and dirty fix: replace all .Select with div.Select to gain higher priority.

[valentijnnieman]

What version of dash-core-components are you using? In https://github.com/plotly/dash-core-components/pull/382 we fixed the issue where user supplied styles weren't overriding the React included styles.

[EBoisseauSierra]

@valentijnnieman indeed, I thought it would have been solved. But I made sure I'm using v0.39.0…

$ pip show dash-core-components
Name: dash-core-components
Version: 0.39.0
...

[anandcu3]

Same behavior in v0.42.1

[mamay13]

Same behavior in 0.45.0 only with imported dash_table

[jjaraalm]

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]

I also have this issue. Any solutions yet? I can't find the part in my CSS which controls the dropdown menu colors.

[AP2008]

I am having the exact same issue but with dash_table. Any solutions yet?

[Geometrein]

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?

[Xzyon]

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

Quick and dirty fix: replace all .Select with div.Select to gain higher priority

[lance-noel]

I have the same problem with .Select--multi .Select-value being overwritten by react-select

[ndretex]

Hello, Is there any update on a permanent fix for this?

Thanks

[Coding-with-Adam]

@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]

Another quick and dirty fix, add !important to the css property you want to override

[gvwilson]

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