点击Formik-Material-UI的Select组件时AppBar变色该如何解决？

我正在使用React、Material、Formik、formik-material-ui开发Web项目。

我按照如下方式引入了Select组件：

import { Formik, Form, Field } from "formik";
import { TextField } from "formik-material-ui";
import MenuItem from "@mui/material/MenuItem";

<Field
    component={TextField}
    type="text"
    select={true}
    align="left"
    fullWidth
    size="small"
    margin="dense"
    variant="outlined"
    name="student"
    >
    <MenuItem value={10}>X</MenuItem>
    <MenuItem value={15}>Y</MenuItem>
    <MenuItem value={20}>Z</MenuItem>
</Field>

但当我从Select下拉菜单中选中选项时，Material-UI的Appbar颜色会发生异常变化，我已附上操作前后的截图：
操作前：

操作后：

请问该如何阻止该异常情况发生？

解决方案 #

该问题由MUI组件样式泄漏引发全局样式冲突导致，可按以下步骤解决：

1. 给Select组件添加disablePortal配置
   下拉菜单默认会挂载到document.body节点上，样式优先级异常会污染全局的Appbar样式，你可以给Field组件传递SelectProps配置阻止默认挂载行为：

<Field
    component={TextField}
    type="text"
    select={true}
    align="left"
    fullWidth
    size="small"
    margin="dense"
    variant="outlined"
    name="student"
    SelectProps={{
      disablePortal: true
    }}
    >
    <MenuItem value={10}>X</MenuItem>
    <MenuItem value={15}>Y</MenuItem>
    <MenuItem value={20}>Z</MenuItem>
</Field>

2. 校验依赖版本兼容性
   如果你使用的是MUI v5（依赖包名为@mui/material），需要安装对应适配v5版本的formik-material-ui，旧版适配MUI v4的包会出现样式不兼容问题。
3. 给Appbar设置固定高优先级样式
   直接给Appbar组件指定固定背景色并提高样式优先级，避免被异常样式覆盖：

import AppBar from '@mui/material/AppBar';

// 组件调用时添加sx配置
<AppBar sx={{ backgroundColor: '#1976d2 !important' }}>
  {/* Appbar内容 */}
</AppBar>

4. 替换为专门的Select组件
   不要通过TextField的select模式实现下拉选择，改用formik-material-ui提供的原生Select组件，避免封装层带来的样式冲突：

import { Select } from 'formik-material-ui';

<Field
  component={Select}
  fullWidth
  size="small"
  margin="dense"
  variant="outlined"
  name="student"
>
  <MenuItem value={10}>X</MenuItem>
  <MenuItem value={15}>Y</MenuItem>
  <MenuItem value={20}>Z</MenuItem>
</Field>

内容的提问来源于stack exchange，提问作者Harsh Agarwal