如何修改MUI 5中TextField select组件的下拉菜单背景色？

需要修改MUI下拉选择菜单的背景色，将默认的白色背景调整为黑色。
初始实现代码：

const styles={ 
  textField:{
    '& .MuiPopover-paper':{
      backgroundColor: 'black'
    }
  }
}

...

<TextField select id='version' label='Version' variant='outlined' sx={styles.textField}>
  <MenuItem value={10}>1</MenuItem>
  <MenuItem value={20}>2</MenuItem>
  <MenuItem value={30}>3</MenuItem>
</TextField>

多次调整.MuiPopover-paper相关的样式写法，都没有生效。

MUI Select的下拉弹出层（Popover）默认通过React Portal挂载到页面根节点（通常是body），并不是TextField组件的子元素，因此写在TextField sx属性内的后代选择器无法匹配到弹出层的DOM节点，样式不会应用。

方法1：通过MenuProps直接给弹出层传样式（优先推荐） #

TextField的select模式原生支持MenuProps属性，可直接透传配置给内部的下拉弹出菜单，不需要纠结DOM层级问题，直接指定Paper的样式即可：

<TextField 
  select 
  id="version" 
  label="Version" 
  variant="outlined"
  MenuProps={{
    PaperProps: {
      sx: {
        backgroundColor: "#000",
        // 黑底需要搭配浅色文字，避免MenuItem内容看不清
        "& .MuiMenuItem-root": {
          color: "#fff"
        }
      }
    }
  }}
>
  <MenuItem value={10}>1</MenuItem>
  <MenuItem value={20}>2</MenuItem>
  <MenuItem value={30}>3</MenuItem>
</TextField>

方法2：禁用Portal挂载，让弹出层渲染在TextField内部 #

如果需要统一在TextField的sx中管理所有样式，可以给菜单设置disablePortal: true，关闭Portal挂载逻辑，此时弹出层会成为TextField的子节点，原有的后代选择器就可以生效：

const styles={ 
  textField:{
    "& .MuiPopover-paper":{
      backgroundColor: "#000",
      color: "#fff"
    }
  }
}

...

<TextField 
  select 
  id="version" 
  label="Version" 
  variant="outlined" 
  sx={styles.textField}
  MenuProps={{
    disablePortal: true
  }}
>
  <MenuItem value={10}>1</MenuItem>
  <MenuItem value={20}>2</MenuItem>
  <MenuItem value={30}>3</MenuItem>
</TextField>

注意：该方案下如果TextField的父级元素设置了overflow: hidden，下拉弹出层可能会被截断，非特殊场景不推荐使用。

内容的提问来源于stack exchange，提问作者Travis Heeter