Fix Chakra UI styles in portal elements

Ah right, the CSS reset only applies in the ScopedCSSReset container, which doesn't work for elements portaled out with the <Portal> component (which a LOT of Chakra components use for things like tooltips etc).

Here, we take advantage of <Portal> having a hardcoded classname .chakra-portal, and applying it to them too!
This commit is contained in:
Emi Matchu 2023-10-15 13:17:33 -07:00
parent 2c98c1c636
commit 35aaaeba8e

View file

@ -139,13 +139,11 @@ function setupLogging() {
/**
* ScopedCSSReset applies a copy of Chakra UI's CSS reset, but only to its
* children (or, well, any element with the chakra-css-reset class).
* children (or, well, any element with the chakra-css-reset class). It also
* applies to .chakra-portal elements mounted by <Portal> components.
*
* We also apply some base styles, like the default text color.
*
* TODO: What about Chakra's portal elements like toast messages, which are
* intentionally mounted elsewhere in the document?
*
* NOTE: We use the `:where` CSS selector, instead of the .chakra-css-reset
* selector directly, to avoid specificity conflicts. e.g. the selector
* `.chakra-css-reset h1` is considered MORE specific than `.my-h1`, whereas
@ -161,7 +159,7 @@ function ScopedCSSReset({ children }) {
</Box>
<Global
styles={`
:where(.chakra-css-reset) {
:where(.chakra-css-reset, .chakra-portal) {
*,
*::before,
*::after {