CODEWITHSUNDEEP
javascriptcssreactjsmaterial-ui
Iqra Moazzama
Iqra Moazzama

Reputation: 111

DatePicker Overly hiding under modal using MUI with react

The Parent Component is MUI Page then modal which is also from MUI and then inside the modal, I'm rendering the DatePicker

// @mui
import { DatePicker } from '@mui/x-date-pickers';

That's how it is being rendered.

    <Controller
        name="createDate"
        control={control}
        render={({ field, fieldState: { error } }) => (
          <DatePicker
            label="Date create"
            value={field.value}
            onChange={(newValue) => {
              field.onChange(newValue);
            }}
            renderInput={(params) => <TextField {...params} fullWidth error={!!error} helperText={error?.message} />}
          />
        )}
      />

But the problem is that DatePicker overly displays under the modal. How can I make changes so that can be fixed?

I tried this question's solution but it didn't help. The reason might be these answers are not for the MUI DatePicker. So I need your help fixing this. Thanks.

Upvotes: 1

Views: 2528

Answers (1)

themagiche
themagiche

Reputation: 11

change the zIndex for the modal component <Modal sx={{zIndex: 3}} ... >

Upvotes: 1

Related Questions