How do I use `className` ? Something between pre.294 and pre-320 changed, before I could jsut assign...

# react

[iari]

How do I use className ?
Something between pre.294 and pre-320 changed, before I could jsut assign a string

className = "content-heading"

but now it expects a ClassName? instance - whats the idiomatic way to instanciate them?

Do I just do

className = ClassName("content-heading")

?

[turansky]

Yes

[turansky]

Who provide content-heading class in your case?

[CLOVIS]

Why was this changed?

[CLOVIS]

It's not even a real type…

[turansky]

It’s not even a real type…

That is why it’s interface 🙂

cc @Sergei Grishchenko

[turansky]

@CLOVIS Could you describe your use case?
Who produce/use class names in your case?

[iari]

I produce classes myself, there are global styles using the class.
It could probably be done otherwise somehow - and it might be interesting to know how - but its my legacy migration, and I dont wnat to migrate everything at once, i'dl ike it to just work with the css class being set manually for now

[Sergei Grishchenko]

The idea behind this change is that className is always reference between CSS and HTML, so we try to encourage you to extract class names to variables and reuse them around your app instead of hardcoding them like string literals.

BUT we don't exclude that there are cases where such approach is not good, so @iari @CLOVIS if you think that this change was wrong and you have example why it is, please, let us know, we will try to discuss them.

[CLOVIS]

@turansky I use TailwindCSS, a framework entirely configured through CSS classes.

[CLOVIS]

My migration: https://gitlab.com/arcachon-ville/formulaide/-/merge_requests/156/diffs?commit_id=1d5f77ad72fc1d6a354ccadc9d4b3603c2dbc3f4

[turansky]

What about such syntax?

className = cx(m_4, px_8, shadow_lg, rounded_lg, z_10, relative, bg_white, color)

where m_4 , px_8 - predefined constants

P.S. cx supports nullable class names