如何不使用sx属性，通过styled函数定位MUI Select的Paper组件？

核心问题在于：Select弹出的菜单（包含Paper组件）是通过React Portal挂载到document.body下的，和Select本身的DOM节点不在同一层级，所以你之前用后代选择器& .MuiMenu-paper根本找不到这个元素。

下面给你两种可行的复用方案：

方案1：单独定制Paper组件，通过默认Props传入 #

这种方式最清晰，也方便单独复用Paper的样式：

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

// 先定制需要的Paper样式
export const StyledSelectPaper = styled(Paper)(({ theme }) => ({
  backgroundColor: 'transparent',
  backdropFilter: 'blur(10px)',
  // 这里可以加其他你需要的样式，比如边框、阴影等
}));

// 定制Select的基础样式
export const StyledSelect = styled(Select)<SelectProps>(({ theme }) => ({
  textAlign: 'start',
  margin: '5px',
  fontWeight: 800,
}));

// 给StyledSelect设置默认的MenuProps，自动应用定制好的Paper
StyledSelect.defaultProps = {
  MenuProps: {
    PaperProps: {
      component: StyledSelectPaper,
    },
  },
};

使用的时候直接用<StyledSelect>就可以了，不需要再手动写MenuProps：

<FormControl>
  <StyledSelect
    variant={variant}
    labelId='select-label'
    name={name}
    disabled={disabled}
    value={value}
    onChange={onChangeFn}
    displayEmpty
  >
    {/* 选项内容 */}
  </StyledSelect>
</FormControl>

如果某个场景需要临时修改Paper样式，直接传入MenuProps覆盖默认值即可，完全不影响复用性。

方案2：直接在styled函数中封装MenuProps #

如果你不想单独创建Paper组件，也可以把MenuProps的配置直接整合到styled组件里：

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

export const StyledSelect = styled(Select)<SelectProps>(({ theme }) => ({
  textAlign: 'start',
  margin: '5px',
  fontWeight: 800,
}))(({ theme }) => ({
  defaultProps: {
    MenuProps: {
      PaperProps: {
        sx: {
          backgroundColor: 'transparent',
          backdropFilter: 'blur(10px)',
          // 其他样式
        },
      },
    },
  },
}));

这种方式更紧凑，但样式和组件绑定更紧密，适合不需要单独复用Paper样式的场景。

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