Dash_table overrules custom css

Dash Python
1

Hi,

I’m having trouble in replacing the react-select css. The problem only occurs in the single Dropdown component. The dropdown with multi=True works just fine.

my overwrite:

.Select.has-value.Select--single > .Select-control .Select-value .Select-value-label, .Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value .Select-value-label {
    color:  #FF0000;
}

is overwritten after a select by react to:

.Select.has-value.Select--single > .Select-control .Select-value .Select-value-label, .Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value .Select-value-label {

 color: #333;

}

I think the only way to solve this is to overwrite the react-css but I don’t know how to overwrite this one.

Okay, did some more testing, the problem occurs as soon as i import dash_table:

in assets test.css:

.Select.has-value.Select--single > .Select-control .Select-value .Select-value-label, .Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value .Select-value-label {
    color:  #FF0000;
}

with the app:

import dash
import dash_html_components as html
import dash_core_components as dcc
import dash_bootstrap_components as dbc


external_stylesheets = [
    # Loading screen CSS
    'https://codepen.io/chriddyp/pen/brPBPO.css',
    # Dash CSS
    'https://codepen.io/chriddyp/pen/bWLwgP.css']


app = dash.Dash(__name__, external_stylesheets=external_stylesheets)


dropdown_style = {
        'color':'rgb(255,0,0)',
}

app.layout = html.Div([
                    dcc.Dropdown(
                    id = 'dd1',
                    value = None,
                    options=[{'label': i, 'value': i} for i in ['a', 'b']],
                    multi=False,
                    style = dropdown_style
                ),
])

if __name__ == '__main__':
    app.run_server(debug=True)

Works just fine, but as soon as i add:

import dash_table

the css is overruled by the react-select one

Thanks,
Marvin

2

I am currently having the same issues with my own application. Have you found a fix to your problem yet?

3

I was able to fix this by updating dash_table through pip.

4

if you add !important to the end of the line in your css files, dash will no longer override those values on that line

1 Like