Dash Core Components DSS styles

Dash Python
4

Hey @vaclavku

The CSS for the default styles in dash-core-components is always loaded, and so it may be that the styles as defined there are being given priority over your modifications. You can ensure that your changes always get applied by using a more specific CSS selector. Read this excellent explanation from Mozilla if you’re not sure what I’m talking about.

Here’s a little example you can try out. I have the following directory structure

.
├── app.py
└── assets
    └── style.css

app.py

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

app.layout = html.Div(
    dcc.Dropdown(
        options=[
            {"label": "Item 1", "value": 1},
            {"label": "Item 2", "value": 2},
            {"label": "Item 3", "value": 3},
            {"label": "Item 4", "value": 4},
        ],
        multi=True,
    ),
    id="wrapper",
)

if __name__ == "__main__":
    app.run_server()

style.css

#wrapper .Select--multi .Select-value {
  background-color: #ff4444;
  color: #fff;
}

#wrapper .VirtualizedSelectFocusedOption {
  background-color: #ffeedd;
}

Briefly, what I did was wrap everything in my app in a div element with the id “wrapper”, then the selector #wrapper .VirtualizedSelectFocusedOption applies to any element of class VirtualizedSelectFocusedOption that is a child of an element with id wrapper. Because this is more specific than just selecting an element with class VirtualizedSelectFocusedOption, your changes will get priority over the default.

Anyway, when I run the above I see something like this

image
image.png784×238 7.15 KB

Let me know if that helps you.

1 Like