如何在MUI/material/styles中为DOM外的Portal元素传递样式类？

问题根源 #

你错误地使用了Select不存在的popover类名。Select通过Portal渲染的下拉菜单，对应的是Menu组件及其内部的Paper容器，而非popover类——这个类名根本不在Select的CSS类列表中，所以样式不会生效。

Select的两种有效解决方案 #

方案1：封装自定义Menu组件并传递给Select

先给Menu（下拉菜单的Portal容器）写样式，再通过Select的MenuProps传入：

import { Select, Menu, styled } from '@mui/material';

// 定义下拉菜单的样式组件
const StyledMenu = styled(Menu)`
  & .MuiPaper-root {
    border: 10px solid red;
    // 可添加更多下拉菜单样式，比如圆角、阴影等
  }
`;

// 封装Select组件（可选，也可直接用原生Select）
const StyledSelect = styled(Select)`
  /* 这里写Select输入框本身的样式 */
`;

// 使用示例
<StyledSelect
  MenuProps={{
    component: StyledMenu // 直接替换默认的Menu为自定义样式的版本
  }}
  value={selectedValue}
  onChange={handleChange}
>
  {/* 选项内容 */}
</StyledSelect>

方案2：通过MenuProps直接覆盖Paper类名

如果你不想单独封装Menu，可直接给Menu的Paper容器指定自定义类，再写样式：

import { Select, styled } from '@mui/material';

const StyledSelect = styled(Select)`
  /* Select输入框样式 */
`;

// 全局样式或组件内样式
const CustomMenuStyles = styled('div')`
  .custom-menu-paper {
    border: 10px solid red;
  }
`;

// 使用示例
<CustomMenuStyles>
  <StyledSelect
    MenuProps={{
      classes: {
        paper: 'custom-menu-paper' // 给Paper容器绑定自定义类
      }
    }}
    // 其他属性
  />
</CustomMenuStyles>

Modal的样式设置方案 #

Modal的Portal内容容器通常是Paper或DialogContent，直接在styled中针对这些类写样式即可：

import { Modal, Paper, styled } from '@mui/material';

const StyledModal = styled(Modal)`
  & .MuiPaper-root {
    border: 10px solid blue;
    padding: 20px;
  }
`;

// 使用示例
<StyledModal open={open} onClose={handleClose}>
  <Paper>
    {/* Modal内容 */}
  </Paper>
</StyledModal>

关于Tooltip文档中Popper的补充说明 #

Tooltip的Portal由Popper组件管理，而Select/Modal的Portal实现逻辑不同：Select依赖Menu/Paper组合，Modal直接渲染到body下的独立容器。所以Tooltip里关于Popper的设置对这两个组件不适用，核心是找到对应Portal元素的实际DOM类名（比如Select的MuiMenu-paper、Modal的MuiPaper-root），再针对性设置样式。

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