如何将自定义样式应用于选择下拉列表而不影响其他 MUI 组件（例如显示/隐藏列面板）？

Question

我正在尝试将自定义样式添加到我的 MUI 选择组件的下拉面板中。我希望下拉菜单看起来像这样： 所需的显示/隐藏列示例

为此，我将以下样式添加到 ThemeManager 中的 MuiList 中：

    MuiList: {
      styleOverrides: {
        root: {
          'backgroundColor': 'var(--main-color)',
          'color': 'var(--text-color-light)',
          'border-width': 'none !important',

          '& .Mui-selected': {
            backgroundColor: '#dddddd !important',
            'color': 'var(--primary-color-hover) !important',
            borderBottom: '1px solid #26586B',
            '&:hover': {
              backgroundColor: 'var(--main-color) !important',
              color: 'var(--primary-color-hover) !important',
            },
          },
...

但是，此更改也会影响其他 MUI 组件，例如数据表中的“显示/隐藏列”面板，如下所示： 自定义下拉样式 问题是我无法将唯一的 id 或 className 添加到下拉面板，因为它是由 MUI 动态生成的。这会导致 ThemeManager 样式同时应用于选择下拉列表和其他组件，例如我不想要的列面板。

最后，这就是应用了 ThemeManager 样式的列面板的外观，这不是我想要的： 显示/隐藏所有面板的样式不正确

有没有一种方法可以仅针对选择下拉列表进行样式设置，而不影响其他 MUI 组件（例如显示/隐藏列面板）？

Answer 1

您不应该覆盖 MUI 主题文件中的 css，您遇到的问题是因为许多 MUI 组件都使用 MuiList 组件（有许多基本组件在复杂组件中重用，例如 Drawer、Table...）。

您也无法通过 sx 或 makeStyles 中的类进行 css，因为 select 的下拉列表不是根 select 内的子组件，而是在 body 标记外部创建一个节点（如果使用 React，则等于根）。

有两种方法来处理下拉样式：

• styled() 实用程序：这种方式可以帮助我们基于现有的 MUI 组件创建一个全新的组件并编写 css 类型。优点是我们可以在不同的屏幕中重复使用这个新组件。
• 通过 MenuProps：通常对于显示在 body 之外的组件（门户风格），MUi 组件通常会提供 props 来处理，例如在 select 组件中，就是 MenuProps props