切换明暗主题时MUI Select组件PaperProps背景色不生效问题

问题根源 #

MUI的Select下拉菜单默认会通过Portal机制挂载到body标签最外层，和你的组件不在同一个DOM层级里。这就导致它读不到你加在根节点（比如#root或body）上的.dark/.light类对应的CSS变量，只能拿到:root里的默认值，所以切换主题时样式不会跟着变。

三种解决方案 #

方案1：让下拉菜单挂载到组件所在的DOM层级 #

通过MenuProps.PopperProps.disablePortal关闭Portal，让下拉菜单和组件放在同一个DOM层级，这样就能继承主题类的CSS变量了。

修改后的代码：

<FormControl sx={{ margin: 0, minWidth: 300 }}>
  <Select
    value={selectedCategory}
    onChange={handleCategory}
    inputProps={{ 'aria-label': 'Without label' }}
    sx={{
      color: 'var(--textColor)', 
      backgroundColor:'var(--input-bg)',
      boxShadow: 'none', 
      '.MuiOutlinedInput-notchedOutline': { border: 0 },
      '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
        borderColor: 'var(--toggleColor)',
      },
      '&:hover .MuiOutlinedInput-notchedOutline': {
        borderColor: 'var(--toggleColor)',
      },
      '.MuiSvgIcon-root ': {
        fill: "var(--toggleDark) !important",
      }
    }}
    MenuProps={{
      style: { maxHeight: 500 },
      // 关闭Portal，让下拉菜单挂载到当前组件的父节点下
      PopperProps: {
        disablePortal: true,
      },
      PaperProps: {
        sx: {
          backgroundColor: 'var(--inputColor)',
          color: 'var(--textColorInDark)',
        }
      }
    }}
  >
    <MenuItem value={'Select Category'}>Select Category</MenuItem>
  </Select>
</FormControl>

⚠️ 注意：关闭Portal可能会让下拉菜单被页面上的其他元素遮挡，这时候可以给Paper加个更高的z-index，或者用PopperProps.container指定一个父节点来挂载。

方案2：用MUI自带的主题系统（更推荐） #

如果你的项目已经在用MUI的ThemeProvider，直接在主题里定义明暗模式的颜色，组件会自动跟着主题切换，不用自己维护CSS变量：

1. 先定义主题：

import { createTheme, ThemeProvider } from '@mui/material/styles';

// 根据模式生成主题
const getTheme = (mode) => createTheme({
  palette: {
    mode, // 'dark' 或 'light'
    background: {
      paper: mode === 'dark' ? '#0a0f1b' : '#e7e7e9', // 下拉菜单背景色
    },
    text: {
      primary: mode === 'dark' ? '#fff' : '#000', // 文字颜色
    },
    primary: {
      main: '#你的主题色', // 替换成你原来的--toggleColor
    }
  },
});

// 在组件里控制模式切换
const [mode, setMode] = useState('dark');
const theme = getTheme(mode);

2. 改造Select组件：

<ThemeProvider theme={theme}>
  <FormControl sx={{ margin: 0, minWidth: 300 }}>
    <Select
      value={selectedCategory}
      onChange={handleCategory}
      inputProps={{ 'aria-label': 'Without label' }}
      sx={{
        color: theme.palette.text.primary,
        backgroundColor: theme.palette.background.default, // 对应原来的--input-bg
        boxShadow: 'none',
        '.MuiOutlinedInput-notchedOutline': { border: 0 },
        '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
          borderColor: theme.palette.primary.main,
        },
        '&:hover .MuiOutlinedInput-notchedOutline': {
          borderColor: theme.palette.primary.main,
        },
        '.MuiSvgIcon-root ': {
          fill: theme.palette.primary.main + ' !important',
        }
      }}
      MenuProps={{
        style: { maxHeight: 500 },
        PaperProps: {
          sx: {
            backgroundColor: theme.palette.background.paper,
            color: theme.palette.text.primary,
          }
        }
      }}
    >
      <MenuItem value={'Select Category'}>Select Category</MenuItem>
    </Select>
  </FormControl>
</ThemeProvider>

方案3：手动判断主题模式设置样式 #

如果不想改CSS变量的方案，也可以用useTheme钩子拿到当前主题模式，直接写条件样式：

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

const YourComponent = () => {
  const theme = useTheme();
  const isDarkMode = theme.palette.mode === 'dark';

  return (
    <FormControl sx={{ margin: 0, minWidth: 300 }}>
      <Select
        // 其他属性不变
        MenuProps={{
          style: { maxHeight: 500 },
          PaperProps: {
            sx: {
              backgroundColor: isDarkMode ? '#0a0f1b' : '#e7e7e9',
              color: isDarkMode ? '#fff' : '#000',
            }
          }
        }}
      >
        <MenuItem value={'Select Category'}>Select Category</MenuItem>
      </Select>
    </FormControl>
  );
};

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