css - Material UI-modal bliver dæmpet af baggrund

Jeg har en modal, der skal poppe op for at vise status for en transaktion, der gennemføres på mit websted. Den fungerer fint bortset fra det faktum, at baggrundsdæmpningseffekten også anvendes oven på modalvinduet. Min modal skal være hvid, men den ender med at være en slags mørkegrå. Jeg er ikke sikker på, hvad jeg gør forkert.

Her er stilen til modalvinduet

const modalStyle = {
    position: 'absolute' as 'absolute',
    top: 0,
    left: 0,
    width: "80%",
    marginLeft: "auto",
    marginRight: "auto",
    marginTop: "150px",
    marginBottom: "150px",
    bgcolor: 'white',
    boxShadow: 24,
    p: 3,
    borderRadius: "25px"
}

Og her er HTML'en til det:

<Modal
    open={open}
    aria-labelledby="modal-modal-title"
    aria-describedby="modal-modal-description"
    sx={modalStyle}
>
    {!done ? (
        <div style={{ display: "flex", flexDirection: "column", height: "100%", alignItems: "center" }}>
            <h1 style={{ fontSize: "50px", textAlign: "center", fontWeight: "700" }}>Transaction Loading...</h1>
            <Box style={{ display: 'flex', width: "300px", height: "300px", justifyContent: "center", }}>
                <CircularProgress style={{ marginTop: "50px" }} size={150} />
            </Box>
        </div>) : (
        <div style={{ display: "flex", flexDirection: "column", height: "100%", alignItems: "center", zIndex: "25" }}>
            <h1 style={{ fontSize: "50px", textAlign: "center", fontWeight: "700" }}>Transaction Completed!</h1>

            <svg className={styles.animatedCheck} viewBox="0 0 24 24">
                <path d="M4.1 12.7L9 17.6 20.3 6.3" fill="none" />
            </svg>
        </div>)}
</Modal>

Jeg ved egentlig ikke, hvad der går galt. Det er mærkeligt, fordi jeg bruger en meget lignende modaldeklaration på et andet sted i mit projekt, og det fungerer helt som forventet.

Svar #1

Modal-komponenten gengiver simpelthen, hvad end children du sender til den foran en backdrop-komponent -- det er op til dig at style children. Dette problem opstår, fordi du i din kode forsøger at style Modal-roden, ikke dens children.

For at rette det, indpak dit indhold i et andet element, hvorpå du kan anvende dine stilarter, og flyt derefter din modalStyle styling til det element. I mit eksempel indpakkede jeg dem i en Box:

<Modal
  open={open}
  aria-labelledby="modal-modal-title"
  aria-describedby="modal-modal-description"
>
  <Box sx={modalStyle}> {/* Moved here */}
    ...
  </Box>
</Modal>

Hvilket producerede:

Fungerende CodeSandbox: https://codesandbox.io/s/sad-christian-de6m9k?file=/demo.tsx

Relaterede artikler