solidjs
Style not applied when using returned component
When I pass an object which is already created inside function, the style is not applied.
The background supposed to become red and I should have flexbox layout shown inside the developer tool.
I am using Astro JS as framework. Therefore if this is not a bug, the problem might occur inside Astro JS
Is the SSR script getting included on the page? Ie are you using extractCss(https://github.com/solidjs/solid-styled-components#extractcsstarget)? CSS in JS library like this will need to output a style tag on the page. Otherwise not sure timing of when JS will be run.
I'm pretty sure this works pure client-side. As for server-side I'm just guessing. A reproduction could help narrow this down.
Nope, I am not using extractCss. The picture have shown all the code I have. I do not quite understand how to use it. So if I want to export the component. Do I need to export the CSS style separately? Or in my case, which steps I have missed to successfully export the component?
Yeah with CSS in JS libraries you need to put the CSS on the page when you SSR. To be fair I have no clue how to do this with Astro. But generally you call extractCss after server rendering and then generate the Style tag like shown in the docs and insert it in the head of your page. I don't know how Astro handles these sort of injections. Might be worth asking them. But without it the CSS won't be present when the app renders. Now it is possible something else is going on as well since once the Solid component hydrates it should rerun some of this logic in the client.
I made a failed attempt here: https://stackblitz.com/edit/github-rqtizn-easxa3?file=astro.config.mjs. The integration does not work because document does not exist to inject css
Without the extractCss, it will work only when client:load is enabled for a component since the js will inject the css at runtime but no SSR stylesheet
Yeah all CSS in JS libraries generally work this way requiring a way to serialize it out with something like extractCss I'm just not clear what Astro does here. This seems like more of an Astro question. Yeah reading the issue most CSS in JS libraries aren't built to handle their case.
I was staring at the adapter API yesterday and thought that the one place that make sense is through: https://docs.astro.build/en/reference/integrations-reference/#injectscript-option but this obviously does not work because Astro does not have an API to add to <head />
I guess another solution is potentially using vite virtual module to call extractCss and let vite inject the css to the header.
This is all my noob research theory since I am very unfamiliar with both vite and astro.
But yeah i saw both twind and goober requires the extractCss pattern. I guess a framework like svelte/vue has the advantage in this particular scenario since they don't need css-in-js and can just handle SSR their css with addRenderer API. addRenderer is the on place I can see so far that you can put random text in the header
@BulliedBeginner Don't you need to forward the props to a top level tag in your component ?
Also when creating an issue, I'd generally recommend to :
- provide something which can be copied (not a screenshot)
- share a small example so someone can reproduce
Otherwise, it makes it harder for people who may want to help.
