Почему стили не применяются в mui modal?

Question

[GNG999]

сделал компонент используя компонент из mui

import * as React from 'react';
import Box from '@mui/material/Box';
import Modal from '@mui/material/Modal';
import {ReactElement} from "react";

const style = {
    position: 'absolute' as 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    width: 400,
    bgcolor: 'background.paper',
    border: '2px solid #000',
    boxShadow: 24,
    p: 4,
};

export default function BasicModal({open,onClose,body, className}:{open:boolean, onClose:()=>void,body:ReactElement, className?:string}) {


    return (
            <Modal
                open={open}
                onClose={onClose}
                aria-labelledby="modal-modal-title"
                aria-describedby="modal-modal-description"
                className={className}
            >
                <Box sx={style}>
                {body}
                </Box>
            </Modal>
    );
}

использую его

<BasicModal
            open={(deleteModalId as boolean)}
            onClose={() => setDeleteModal(false)}
            className='delete-modal-block'
            body={<Box>
                <Typography variant='h5'>
                    Удалить заключение ?
                </Typography>
                <div className='delete-modal-btns'>
                    <Button onClick={() => removeAppl(deleteModalId as number)}
                            variant='contained'
                            className='approve-button'>Да
                    </Button>
                    <Button color='error'
                            onClick={() => setDeleteModal(false)}
                            variant='contained'
                            className='decline-button'>Нет
                    </Button>
                </div>
            </Box>}/>

'delete-modal-btns' - почему этот стиль не применяется ? Иза того что модалка в фикс позиции и как бы выпадает из дерева стилей ?

Answer 1

[GNG999]

Причина была в том, что элемент был за пределами главного родительского дива (div id="root")
у mui modals есть пропс disablePortal - он встраивает компонент в дерево главного родит-го дива