External stylesheet doesn't seem to have any effects

Dash Python
1

Hi, I’m following this guide to use an external stylesheet, but it doesn’t seem to have any effects. For example setting the background color or text color to red to see that it works, but nothing changes.

I have external_stylesheets = [ link to a css file on github... ] , and app = dash.Dash(__name__, external_stylesheets=external_stylesheets).

Not sure where could have gone wrong. Any suggestions are useful!

2

Could you share with us the link you are trying to add?

3

Yes of course, it’s essentially the same file from the guide (https://codepen.io/chriddyp/pen/bWLwgP.css) and just put it on github that’s all. You can find the file here dashcss/bWLwgP.css at main · peilinUWU/dashcss · GitHub. I just added

* {
  background-color: red;
}

to see if it takes effect.

4

Are there any errors on the browser console? I suspect that it could be something related to the mime type, so perhaps setting type="text/css" explicitly in the external_stylesheets could fix this problem (if that’s actually the issue).

5

I gave it a try but nothing has changed. I added the following:

external_stylesheets = [
    'https://github.com/peilinUWU/dashcss/blob/4c6874d18431119cb9e2e5e5b116be42796a77c2/bWLwgP.css',
    {
        'type': "text/css"
    }
]
6

Ok… is there an error in the browser console?

7

Ok yes there was one.

Warning: Each child in react-dom@16.v2_0_0m1637145051.14.0.js:82 a list should have a unique "key" prop. See https://fb.me/react-warning-keys for more information.
in th (created by s)
in tr (created by s)
etc...

And there are two warnings about

componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

and

componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

I can post more details about the warning if needed.

8

It’s ok, those warnings are expected and not what I was hoping for.