Kevin Powell - CommunityKP-C
Kevin Powell - Community•2y ago•
15 replies
thethingisback

<dialog/> CSS ::backdrop settings not being applied to cond'ly rendered dialog

dialog {
    position: fixed;
    border: none;
    border-radius: 5px;
    box-shadow: var(--niceShadow2);
    height: 95%;
    max-height: unset;
    width: 95%;
    max-width: 1200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: visible !important;
}
dialog[open] {
    animation: myFadeIn .55s ease;
}

/* dialog background color*/
dialog[open]::backdrop {
    background: rgba(0, 137, 57, 0.183);
    backdrop-filter: blur(3px);
}

Attached is my react component which is conditionally rendering the <dialog className = "pick_up_dialog"/> element based on whether a user has a reservation for the current day, according to data being received in an API call , "fetchReservations".

Unlike ReserveModal and ProfileModal, which are also <dialog/> elements, but being returned in an imported component, the .pick_up_dialog <dialog/> is getting conditionally rendered directly inside of the PortalHome component I've attached.

The transition animation from the dialog{} declaration and other normal CSS settings are being applied to all three dialogs. But the dialog[open]::backdrop{} settings are not being applied to the conditionally rendered .pick_up_dialog.

Is there something about conditional rendering that changed the CSS access to an element in React?

My CSS is being imported in my App.js: import style from "./components/reserve.css";

When the dialog is open and I inspect it, there is no ::backdrop element rendered in the DOM.

What am I not understanding?
kWQYDDjj.js9.41KB
Was this page helpful?