如何通过styled组件直接样式化MUI v5 Select菜单，而非SX或MenuProps？

你之前的代码无效，核心原因是：MUI Select的下拉菜单（Menu）是通过React Portal渲染到document.body中的，不在Select组件的DOM层级内，所以你写在StyledDataSelect里的.MuiMenu-paper选择器无法穿透Portal选中菜单元素。

以下是两种不依赖SX属性的解决方案：

方法1：自定义StyledMenu组件并通过MenuProps传递 #

先单独用styled创建样式化的Menu组件，再通过Select的MenuProps传入，全程不使用sx属性：

import { Select, Menu, SelectChangeEvent, ReactNode } from '@mui/material';
import { styled } from '@mui/material/styles';
import type { SelectProps } from '@mui/material/Select';

interface ExtendedSelectProps extends SelectProps {
  onChange: (event: SelectChangeEvent<unknown>, child: ReactNode) => Promise<void>;
}

// 自定义样式化的Menu组件
const StyledMenu = styled(Menu)(({ theme }) => ({
  '& .MuiPaper-root': {
    backgroundColor: 'orange',
    // 可添加更多菜单样式，比如圆角、阴影
    borderRadius: theme.shape.borderRadius,
    boxShadow: theme.shadows[3],
  },
}));

// 样式化Select本身
const StyledDataSelect = styled(Select)<ExtendedSelectProps>(({ theme }) => ({
  '& .MuiInputBase-input': {
    fontSize: '1rem',
  },
}));

// 使用组件
<StyledDataSelect
  variant='standard'
  name='selectTrainingWeek'
  disabled={disabled}
  value={value}
  onChange={onChangeFn}
  displayEmpty
  MenuProps={{ component: StyledMenu }} // 传递自定义Menu组件，未使用sx
>
  {/* 菜单选项 */}
</StyledDataSelect>

方法2：CSS变量+全局样式（完全不依赖MenuProps） #

如果完全不想使用MenuProps，可以通过CSS变量结合全局样式实现：

1. 在StyledDataSelect中定义CSS变量：

const StyledDataSelect = styled(Select)<ExtendedSelectProps>(({ theme }) => ({
  '--menu-bg': 'orange',
  // Select自身样式
}));

2. 添加全局样式（可放在全局CSS文件或用styled的createGlobalStyle）：

import { createGlobalStyle } from '@mui/material/styles';

const GlobalStyles = createGlobalStyle`
  .MuiMenu-paper {
    background-color: var(--menu-bg, #fff); // 默认白色，变量存在时覆盖
  }
`;

// 在App或组件根节点引入
<GlobalStyles />

如果需要仅针对当前Select的菜单生效，可给Select加自定义类名实现精准匹配：

// 给StyledDataSelect添加标记类名
const StyledDataSelect = styled(Select)<ExtendedSelectProps>(({ theme }) => ({
  '--menu-bg': 'orange',
  '&.custom-training-select': {},
}));

// 全局样式精准匹配
const GlobalStyles = createGlobalStyle`
  .custom-training-select ~ .MuiMenu-paper {
    background-color: var(--menu-bg);
  }
`;

// 使用时添加类名
<StyledDataSelect className="custom-training-select" ...>

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