[BUG] Upload component styling using HTML classes

[jburtscher]

As far as I can tell, the className_* properties in the upload component don't seem to have any effect (I'm using Dash 3.0.1 on Windows with Edge Version 134.0.3124.83).
With the following app and CSS file, the upload component is colored yellow but does not change color when I drag files onto it (be it one file for the active case or multiple files for the rejected case):

from dash import Dash, dcc

app = Dash()
app.layout = dcc.Upload(
    "Upload",
    className="upload",
    className_active="upload-active",
    className_reject="upload-reject",
)
app.run(debug=True)

.upload { background: yellow; }
.upload-active { background: green; }
.upload-reject { background: red; }

If I use the style_* properties, everything works fine:

from dash import Dash, dcc

app = Dash()
app.layout = dcc.Upload(
    "Upload",
    style={"background": "yellow"},
    style_active={"background": "green"},
    style_reject={"background": "red"},
)
app.run(debug=True)

[AnnMarieW]

Hi @jburtscher
I can't replicate the issue. Here is your example on pycafe

[jburtscher]

Hi @AnnMarieW – thanks for looking into the issue!
I see the same behavior on PyCafe: if I use the className_active property and drag a file onto the upload component, only the border turns green (the default style and not what the custom CSS specifies):

With the style_active property, however, the entire background turns green:

And the same goes for multiple files and the className_reject property.

[AnnMarieW]

Oh, yes, I see it now!

Looks like the default style is overriding the classNames

Commenting out these lines allows the className_* props to work https://github.com/plotly/dash/blob/dev/components/dash-core-components/src/components/Upload.react.js#L170-L182

[jburtscher]

Thanks for the fix @AnnMarieW!