Почему стили не работают в модальном окне MUI?

В вашем коде вы создаете модальное окно с использованием Material-UI (MUI), и вы задаете ему класс `className`, который, по вашему описанию, не применяет стили. Давайте разберем несколько причин, почему стили могут не работать, и как правильно обрабатывать взаимодействия с модальным окном.

### 1. Проблема с `className`

При использовании `className` в компоненте `Modal`, он не передается на корневой элемент модального окна. Вместо этого, вы можете добавить `className` к элементу `Box` внутри `Modal`. Это может выглядеть так:

```javascript
<Box sx={style} className={className}>
    {body}
</Box>
```

### 2. Обработка взаимодействий

Чтобы обеспечить обратную связь от модального окна в родительский компонент, вы можете использовать колбэки. Например, если вы хотите закрыть модальное окно и передать результат действия обратно в родительский компонент, добавьте соответствующие функции обратного вызова:

```javascript
// В родительском компоненте
const handleDelete = (id) => {
    // Ваша логика удаления
    console.log(`Удален ID: ${id}`);
    setDeleteModal(false); // Закрываем модалку
};

<BasicModal
    open={deleteModal}
    onClose={() => setDeleteModal(false)}
    className='delete-modal-block'
    body={
        <Box>
            <Typography variant='h5'>
                Удалить заключение?
            </Typography>
            <div className='delete-modal-btns'>
                <Button 
                    onClick={() => {
                        handleDelete(deleteModalId); // Передаем айди для удаления
                    }}
                    variant='contained'
                    className='approve-button'>
                    Да
                </Button>
                <Button 
                    onClick={() => setDeleteModal(false)} 
                    variant='outlined'>
                    Нет
                </Button>
            </div>
        </Box>
    }
/>
```

### 3. Полный пример с обработкой

Вот полный пример того, как можно реализовать модальное окно с передачей данных обратно в родительский компонент:

```javascript
import * as React from 'react';
import Box from '@mui/material/Box';
import Modal from '@mui/material/Modal';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';

const style = {
    position: '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 }) {
    return (
        <Modal
            open={open}
            onClose={onClose}
            aria-labelledby="modal-modal-title"
            aria-describedby="modal-modal-description"
        >
            <Box sx={style} className={className}>
                {body}
            </Box>
        </Modal>
    );
}

// Родительский компонент
const ParentComponent = () => {
    const [deleteModal, setDeleteModal] = React.useState(false);
    const [deleteModalId, setDeleteModalId] = React.useState(null);

    const handleDelete = (id) => {
        console.log(`Удален ID: ${id}`);
        setDeleteModal(false);
    };

    return (
        <div>
            <Button onClick={() => { setDeleteModal(true); setDeleteModalId(1); }}>Удалить элемент</Button>
            <BasicModal
                open={deleteModal}
                onClose={() => setDeleteModal(false)}
                className='delete-modal-block'
                body={
                    <Box>
                        <Typography variant='h5'>
                            Удалить заключение?
                        </Typography>
                        <div className='delete-modal-btns'>
                            <Button 
                                onClick={() => handleDelete(deleteModalId)} 
                                variant='contained' 
                                className='approve-button'>
                                Да
                            </Button>
                            <Button 
                                onClick={() => setDeleteModal(false)} 
                                variant='outlined'>
                                Нет
                            </Button>
                        </div>
                    </Box>
                }
            />
        </div>
    );
};
```

Этот код позволит вам открывать модальное окно, отображать информацию и правильно обрабатывать взаимодействия с элементами в нем. Убедитесь, что стили, связанные с классом `delete-modal-block`, применяются к `Box` внутри модального окна, чтобы избежать проблем с отображением.

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