How do I use `className` ? Something between pre.2...
# react
i
How do I use
className
? Something between pre.294 and pre-320 changed, before I could jsut assign a string
Copy code
className = "content-heading"
but now it expects a
ClassName?
instance - whats the idiomatic way to instanciate them? Do I just do
Copy code
className = ClassName("content-heading")
?
t
Yes
Who provide
content-heading
class in your case?
c
Why was this changed?
It's not even a real type…
t
It’s not even a real type…
That is why it’s interface 🙂 cc @Sergei Grishchenko
@CLOVIS Could you describe your use case? Who produce/use class names in your case?
i
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
s
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.
c
@turansky I use TailwindCSS, a framework entirely configured through CSS classes.
t
What about such syntax?
Copy code
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