OpenNeo/impress
OpenNeo/impress
1
0
Fork 1
Code Pull requests Activity

Fix Chakra UI styles in portal elements

Browse source 
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
1 changed files with 3 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/javascript/wardrobe-2020/AppProvider.js
View file

@ -139,13 +139,11 @@ function setupLogging() {
/** /**
* ScopedCSSReset applies a copy of Chakra UI's CSS reset, but only to its * 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. * 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 * NOTE: We use the `:where` CSS selector, instead of the .chakra-css-reset
* selector directly, to avoid specificity conflicts. e.g. the selector * selector directly, to avoid specificity conflicts. e.g. the selector
* `.chakra-css-reset h1` is considered MORE specific than `.my-h1`, whereas * `.chakra-css-reset h1` is considered MORE specific than `.my-h1`, whereas
@ -161,7 +159,7 @@ function ScopedCSSReset({ children }) {
</Box> </Box>
<Global <Global
styles={` styles={`
:where(.chakra-css-reset) { :where(.chakra-css-reset, .chakra-portal) {
*, *,
*::before, *::before,
*::after { *::after {