search

jotaijs / jotai-devtools

A powerful toolkit to enhance your development experience with Jotai
https://jotai.org/docs/tools/devtools
MIT License
124 stars 29 forks source link

fix: add trigger button to global css #98

Closed renrizzolo closed 11 months ago

renrizzolo commented 11 months ago

This is a small presentational fix for SSR.

Changes

Details

When server rendering, the trigger button has no styles applied yet, so you get this jank when refreshing the page. Note I made an addition of borderWitdth: 0 to prevent the user agent border style showing up.

There a few ways you could do this, but I thought it made sense to keep the styles in the Extension.tsx file and import them.

Here's the before/after with a create-next-app app:

https://github.com/jotaijs/jotai-devtools/assets/13904763/2ed647b7-de41-45d8-9efe-2c5ed4bd8a29

https://github.com/jotaijs/jotai-devtools/assets/13904763/93dfb8a4-e4a8-4e2c-8e76-2761880f1527

codesandbox-ci[bot] commented 11 months ago

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 6de6a87429b70174a5e80b28f944602048790294:

Sandbox Source
React Configuration
React TypeScript Configuration