-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
React 18 support for Global Styles :) #2574
Conversation
…1 is hoisted (#2248) * import css from core to ensure correct import even when emotion/css@11 is hoisted * Update index.js Co-authored-by: Mitchell Hamilton <mitchell@hamil.town>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
* Fix hydration mismatches with `React.useId` * Update .changeset/strange-kids-change.md Co-authored-by: Mitchell Hamilton <mitchell@hamil.town>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
|
We'll be working on the React 18 support soon. For the time being, we don't expect to merge any PRs related to this topic - unless the PR would really implement the whole thing in a comprehensive manner. I'm sorry if this sounds harsh but it will just be easier this way to manage the whole thing for us |
Ok :) |
* Export Keyframes type from @emotion/core * Create quiet-impalas-speak.md * Update quiet-impalas-speak.md * Update quiet-impalas-speak.md * Update .changeset/quiet-impalas-speak.md Co-authored-by: Mateusz Burzyński <mateuszburzynski@gmail.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
If I understand correctly the same(ish) thing has landed in #2600 |
Yh 🙌🔥🙌 |
What:
Hi,
React 18 introduced new
useInsertionEffect
as substitution foruseLayourEffect
for better hydration supports for css in js libraries.Emotion CSS (React) global styles uses
useLayoutEffect
which we can change touseInsertionEffect
and fallback touseLayoutEffect
.Why:
This will give better concurrent support and hydration support for websites using React 18 :)
How:
By changing-:
and
Code need to be changed like below one 👇 (Emotion React Global Styles)-:
Checklist:
Hi sir/madam I am new to JavaScript world even to programming world Please apologize if I made any mistakes :)