如何一鍵關閉模式及其下拉菜單 MUI

Question

我想知道是否可以一次關閉單擊后打開的模式及其下拉菜單。

我有下面的截圖和這里的沙箱鏈接： https://codesandbox.io/s/eloquent-murdock-nwewl4?file=/src/App.tsx

截屏

我可以通過單擊手形圖標來打開彈出窗口。 然后我可以通過單擊主題輸入打開下拉菜單。

我附上了一個背景，可以打開第一個彈出窗口，單擊它可以關閉同一個彈出窗口。 現在彈出窗口和 select 下拉菜單都有一個背景。 所以我只能先關閉 select 下拉菜單，然后再彈出。

我正在使用 MUI 庫，所以這就是我發現自己堅持這樣做的原因。 我相信這是 z-index 的問題。 我已經閱讀了 MUI 文檔，我看到MUI 模態的 z-index 是 1300 。

我想知道如果我單擊背景以獲得更好的用戶體驗，是否可以同時關閉彈出菜單和 select 下拉菜單。

我嘗試過不同的方式

1. 我已經添加了 MenuProps 和 PaperProps（有和沒有 the.important 關鍵字）來嘗試減少下拉菜單的 z-index。 只有背景變成了紅色。 我沒有看到任何其他變化。

`

<Select labelId="theme-label" id="theme-checkbox" value={age} label="Age" onChange={handleChange} MenuProps={{ sx:{ zIndex: '1 !important',}, PaperProps: {  sx: {  zIndex: '1 !important', background: 'red', '& .MuiMenuItem-root': {  zIndex: '1 !important', }, }, }, }} >
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>

`

1. 我還嘗試使用庫中的類來嘗試刪除下拉選擇的背景，我認為這是一種不好的做法，並且當我添加這段代碼時我無法再與主題輸入交互。

`

.css-10nakn3-MuiModal-root-MuiPopover-root-MuiMenu-root{
    position: static !important;

}

`

1. 我嘗試了使用 important 關鍵字的不同方法。 但我沒有看到任何結果。

我在 SO 上已經有一段時間了，但幾乎沒有發布。 我現在正在努力學習反應，如果有人能幫助我，我將不勝感激。 提前致謝！

編輯：更改截圖描述

Answer 1

您可以使用 MUI Select 的 onClose

這是代碼

<Select
  labelId="theme-label"
  id="theme-checkbox"
  value={age}
  label="Age"
  onChange={handleChange}
  onClose={()=>setToggleMenu(false)}
    >
    <MenuItem value={10}>Ten</MenuItem>
    <MenuItem value={20}>Twenty</MenuItem>
    <MenuItem value={30}>Thirty</MenuItem>
 </Select>