how to render a modal inside root element in react?

Question

I am building a react app with a modal containing a form.

The css for that form wasn't working correctly so when I did an inspect element I figured out that the modal is outside the ... root element and when I copy the modal element inside a specific child element inside the root with the class "container__wrap" the css of the form works correctly.

So... I want the modal to be inside the root element and more specifically inside a div with the class "container__wrap like in the second attached picture. this is the modal code

render() {
    const { modal, allDay } = this.state;
    //console.log(this.state);
    return (
        <Modal
            isOpen={modal}
            toggle={this.toggle}
        >
            <div className="modal__header">
                <button className="lnr lnr-cross modal__close-btn" type="button" onClick={this.toggle} />
            </div>
            <h3 className="page-title" style={{ color: '#2F9585' }} >Edit event</h3>
            <br />
            <br />
            <ModalBody>
                <form className="form form--horizontal" onSubmit={this.props.handleSubmit(this.onSubmit)}>
                    <div className="form__form-group" >
                        <span className="form__form-group-label">Title</span>
                        <div className="form__form-group-field">
                            <Field
                                name="title"
                                component="input"
                                type="text"
                                placeholder="Title of your event"

                            />
                        </div>
                    </div>
                    <div className="form__form-group">
                        <span className="form__form-group-label">start</span>
                        <div className="form__form-group-field">
                            <Field
                                name="start"
                                component={renderDateTimePickerField}
                                onChange={this.handleStartChange}
                                props={{ showTime: allDay }}

                            />
                            <div className="form__form-group-icon">
                                <TimetableIcon />
                            </div>
                        </div>
                    </div>
                    <div className="form__form-group">
                        <span className="form__form-group-label">end</span>
                        <div className="form__form-group-field">
                            <Field
                                name="end"
                                component={renderDateTimePickerField}
                                onChange={this.handleEndChange}
                                props={{ showTime: allDay }}
                            />
                            <div className="form__form-group-icon">
                                <TimetableIcon />
                            </div>
                        </div>
                    </div>
                    <div className="form__form-group">
                        <div className="form__form-group-field">
                            <Field
                                name="allDay"
                                component={renderCheckBoxField}
                                label="All day ?"
                                value={allDay}
                                onChange={this.handleAllDayChange}
                                className="colored"
                            />
                        </div>
                    </div>
                    <div className="form__form-group" >
                        <span className="form__form-group-label">description</span>
                        <div className="form__form-group-field">
                            <Field
                                name="description"
                                component="textarea"
                                type="text"
                                placeholder="description"
                            />
                        </div>
                    </div>
                    <ButtonToolbar className="form__button-toolbar">
                        <Button color='danger' onClick={this.delete}>delete</Button>{' '}
                        <Button onClick={this.toggle}>Cancel</Button>{' '}
                        <Button color="success" type="submit">update</Button>
                    </ButtonToolbar>
                </form>
            </ModalBody>
        </Modal>
    )
};

This is where the element is rendered outside the root

This is the hierarchy where the modal should be

Answer 1

Normally, React render components inside the root element. I guess the Modal you're using is from a UI library. And it might apply something like react-portal to make the modal component outside the root element. You can check the doc of that library see if they provide an extra prop to support render inside root element. Or you can create your own modal without using react-portal.

https://zh-hant.reactjs.org/docs/portals.html