Cannot use with Chakra UI

[PeterChen1997]

What version of astro are you using?

2.6.4

Are you using an SSR adapter? If so, which one?

no

What package manager are you using?

yarn

What operating system are you using?

Mac

What browser are you using?

Chrome

Describe the Bug

After I add the Chakra's code, the style is lost in the Chakra component

What's the expected result?

The style is worked fine.

Link to Minimal Reproducible Example

https://codesandbox.io/p/sandbox/boring-browser-yzk2yz?file=%2Fpackage.json%3A11%2C5

Participation

• I am willing to submit a pull request for this issue.

[natemoo-re]

Hello! Sorry for the frustration. Chakra currently is not expected to work with Astro for a few reasons.

When Astro renders React components, each of them are executed as an "island" in an isolated scope. That means that ChakraProvider is isolated from any of its children and Badge will never receive the Context object that should have been provided to it.

Additionally, CSS-in-JS is often incompatible with Astro because many popular solutions rely on non-standard lifecycle hooks that aren't compatible with Astro's server rendering approach. I'm going to close this in favor of #4432, which documents all of the issues with using CSS-in-JS in Astro today.

[PeterChen1997]

Hello! Sorry for the frustration(挫折). Chakra currently(目前) is not expected(期望) to work with Astro for a few reasons(原因).

When Astro renders(渲染) React(反应) components(组件), each of them are executed(执行) as an "island" in an isolated(隔离) scope(范围). That means(意味着) that ChakraProvider is isolated(隔离) from any of its children and Badge will(将) never receive the Context(上下文) object that should have been provided to it.

Additionally, CSS-in-JS is often incompatible(相容) with Astro because many popular(流行) solutions(解决方案) rely(依赖) on non-standard(标准) lifecycle hooks(钩) that aren't compatible(兼容) with Astro's server rendering(呈现) approach(方法). I'm going to close this in favor(忙) of #4432, which documents(文档) all of the issues(问题) with using CSS-in-JS in Astro today.

Thx for reply, I like Astro. I hope it develops better and better.