如何在@mui/material/Menu中用CSS定位ul元素

问题分析 #

你尝试给点击按钮后出现的ul（对应MUI的MuiList-root类）设置以下样式，但可能因优先级或选择器匹配问题未生效：

&.MuiList-root {
    padding-top: 0px;
    padding-bottom: 0px;
}

可行解决方法 #

• 方法一：使用MUI内置sx属性（推荐）
  直接在List组件上通过sx属性设置内边距，该方式优先级高于默认样式：

  <List sx={{ paddingTop: 0, paddingBottom: 0 }}>
    {/* 列表项内容 */}
  </List>
  

  也可使用简写形式：

  <List sx={{ pt: 0, pb: 0 }}>
    {/* 列表项内容 */}
  </List>
  

• 方法二：自定义类名强制覆盖
  若需要通过外部CSS文件设置，可添加自定义类并配合!important（仅在必要时使用）：

  1. 定义CSS类：

  .noPaddingList {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  

  2. 绑定到List组件：

  <List className="noPaddingList">
    {/* 列表项内容 */}
  </List>
  

• 方法三：全局主题统一修改
  如果需要所有List组件都应用该样式，可通过自定义MUI主题实现：

  import { createTheme, ThemeProvider } from '@mui/material/styles';
  
  const customTheme = createTheme({
    components: {
      MuiList: {
        styleOverrides: {
          root: {
            paddingTop: 0,
            paddingBottom: 0,
          },
        },
      },
    },
  });
  
  // 在根组件外层包裹主题提供者
  <ThemeProvider theme={customTheme}>
    {/* 你的应用内容 */}
  </ThemeProvider>
  

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