How does dynamic styles work?
preshonyee opened this issue · comments
Can this be a solid replacement to styled components?
How would this work with dynamic styling based on props similar to styled-components? Also can you update the docs with a section that talks about migrating from styled-components?
I've managed to replace our styled-components / emotion usage with Navita - so it's definitely possible.
The dynamic nature of styled-components makes it very flexible. I've been thinking about this a lot when building Navita, and what I eventually would like to do is to build a complementary package that makes transitioning from styled-components easier.
I mentioned it briefly under "the future" on the documentation site.
It would abstract away whats possible today, and give users an easier API. I'm still thinking about how this would work, but it's something I would like to get in at some point. I'm working on a new evaluator that uses static analysis as much as possible and only evaluates js whenever it's strictly needed. This evaluator will ensure that we always generate as little CSS as possible.
Generally, I would try to stay away from dynamic styles, and only reach for it when absolutely necessary. For things like active style, you can compose styles with the runtime merge()-helper. You can see an example of that here.
However, the way I have approached dynamic styles is with CSS variables. Here's an example.
You can see both examples live here:
https://codesandbox.io/p/sandbox/navita-dynamic-styles-hgh3x7?file=%2Fsrc%2Fexamples%2Fwith-css-var.tsx%3A1%2C1
Closing. But feel free to re-open if you get stuck on anything.