1

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.

lizardkingLK
  • 25
  • 2
  • 8
Iqra Moazzama
  • 111
  • 7

1 Answers1

1

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

themagiche
  • 11
  • 2