classList is only applied if className is given

[dsimon-dev]

Considering the following styled div:

const Div = styled("div")`
  color: red;
`

The component:

<Div classList={{ foo: true }} />

results in <div class="go1681785550"></div>, but it should also contain foo.

Adding a className prop:

<Div className="bar" classList={{ foo: true }} />

results in <div class="bar go1681785550 foo"></div>, containing both foo and bar.

[ryansolid]

Thanks for reporting. I suspect this has to do with the fact that class/className overwrites all classes and classList applies them piecewise. Depending on how they are applied they trample each other. I am looking at ways to improve this if possible, but it is innately difficult given the way reactivity independently updates. We's almost need to change how all class applications apply with the existence of a classList property. My general advice for right now is not mixing these and we will have to see if there is a reasonable fix.

[dsimon-dev]

Thanks for the quick response, my workaround for now is just using the className prop with classnames.

[httnn]

just ran into this, would be awesome if you could use classList with styled components! it's oftentimes much more convenient than to pass in and handle a custom prop in the component.