External CSS Horrors

Dash Python
1

Hi,

In trying to customize the look of dropdown inputs(for a dark theme), am finding that every aspect of a control needs to be specified in CSS. for example the selected value of a dropdown is styled iwth the following selector in the tags.

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

It is impossible to override this with external css.

Also, external css is loaded before all the style tags. But, if i’m creating external css, i almost always want it to override those built in styles. So what is the fix? How can we actually format these inputs using CSS?

Thanks,

2

I had the same issue. I used two strategies:

  1. Use a CSS preprocessor (like Sass), that helps to DRY and write cleaner code;
  2. Over-specify your CSS rules to supersede default rules: e.g., write div.Select instead of .Select (what should be sufficient)
3

Plus make sure you’re using a DCC version that is [more recent] than v.0.38.1 as there was a bug where your local CSS were loaded after default ones.

4

Do you mean newer than 0.38.1?

1 Like
5

Indeed!

(I meant that came later in the development of dash, i.e. when the project was older (in the sense of more mature) — but I agree my sentence is obviously totally misleading).
I’ve edited my post.