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:
parent
2c98c1c636
commit
35aaaeba8e
1 changed files with 3 additions and 5 deletions
|
@ -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 {
|
||||
|
|
Loading…
Reference in a new issue