From 35aaaeba8eab9ca28cfddb616d4ad8c2d369db58 Mon Sep 17 00:00:00 2001 From: Matchu Date: Sun, 15 Oct 2023 13:17:33 -0700 Subject: [PATCH] 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 component (which a LOT of Chakra components use for things like tooltips etc). Here, we take advantage of having a hardcoded classname .chakra-portal, and applying it to them too! --- app/javascript/wardrobe-2020/AppProvider.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/app/javascript/wardrobe-2020/AppProvider.js b/app/javascript/wardrobe-2020/AppProvider.js index 6aa29d3a..4ea54271 100644 --- a/app/javascript/wardrobe-2020/AppProvider.js +++ b/app/javascript/wardrobe-2020/AppProvider.js @@ -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 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 }) {