stable lily
I have this snippet in a .astro file:
(other valid markup...)
</div>
<LoginMenu client:only="react" devMode={DEV_MODE} />
</div>
and this renders a <script> and a <style> tag to raw text in the dom, and the rest of the component is broken. If I wrap LoginMenu with a div it shows up, but it breaks my flex layout. how can i fix this?
bright ploverBOT
Hi @stable lily. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Based on the information provided in the extracts, it seems like you're encountering an issue similar to the one discussed in this GitHub issue (https://github.com/withastro/astro/issues/8377). The issue was that the styles were being applied to the <script> tag that Astro uses for hydration of components, causing it to be rendered as visible text in the DOM.
A temporary workaround suggested in the discussion was to explicitly set display: none to the <script> and <style> tags added at runtime by Astro. This can prevent your CSS from unintentionally targeting these tags. However, please note that this is a workaround and might not be the best solution.
Here's an example of how you might apply this workaround:
script[astro-island], style[astro-island] {
display: none;
}