Overriding default css of Dash core components

Dash Python
1

Hello,

I was working with the dropdown component of dcc and passing custom stylesheets through assets folder but the dash is prioritizing the default css (text/css) over the the custom stylesheet.

Is there a way to override these default css for dcc components? I was simply trying to make border radius of the dropdown component to 0 instead of 4px which is default.

I tried using static route method and also gave the below conditions in app.py.
app.css.config.serve_locally = True
app.scripts.config.serve_locally = True

This method is overriding the css if I use in a single app file but if I am using a module for my app it is not working.

2

One option is to use a more specific CSS selector for the elements you want to modify. For example, you could wrap your layout in a div with some id

app.layout = html.Div(..., id="layout-content")

then add something like this to your CSS

#layout-content .Select-control {
  border-radius: 0px;
}

i.e. any element of class Select-control that is a child of the element with id layout-content should have border radius 0. Because this is more specific than just selecting all elements of class Select-control it should always take precedence over the default CSS.

Let me know if that works! I tried with a simple single file app, but you said that already worked for you. I think this should work for your module based app.

1 Like
3

Thankyou very much for your response. Your fix worked like charm

1 Like