如何修改Mantine.ui组件库中菜单的悬停颜色？

以下是几种可靠的修改方式，按优先级推荐：

1. 通过主题配置全局修改（推荐） #

这种方式会统一修改所有Menu组件的悬停样式，符合Mantine的设计体系：

import { MantineProvider, createTheme, Menu } from '@mantine/core';

const theme = createTheme({
  components: {
    Menu: {
      styles: (theme) => ({
        item: {
          '&:hover': {
            backgroundColor: theme.colors.blue[2], // 替换为你需要的悬停背景色
            color: theme.colors.blue[8], // 可选：修改悬停时的文字颜色
          },
        },
      }),
    },
  },
});

function App() {
  return (
    <MantineProvider theme={theme}>
      <Menu>
        <Menu.Target>
          <button>打开菜单</button>
        </Menu.Target>
        <Menu.Dropdown>
          <Menu.Item>选项1</Menu.Item>
          <Menu.Item>选项2</Menu.Item>
        </Menu.Dropdown>
      </Menu>
    </MantineProvider>
  );
}

2. 给单个Menu组件局部修改 #

如果只需要修改特定菜单的样式，直接用sx属性：

import { Menu } from '@mantine/core';

function CustomMenu() {
  return (
    <Menu
      sx={(theme) => ({
        '& .mantine-Menu-item:hover': {
          backgroundColor: '#e0f7fa',
          color: '#00796b',
        },
      })}
    >
      <Menu.Target>
        <button>打开菜单</button>
      </Menu.Target>
      <Menu.Dropdown>
        <Menu.Item>选项1</Menu.Item>
        <Menu.Item>选项2</Menu.Item>
      </Menu.Dropdown>
    </Menu>
  );
}

3. 使用自定义CSS类 #

通过全局CSS或CSS模块定义样式，适合习惯传统CSS写法的场景：

全局CSS示例 #

.custom-menu .mantine-Menu-item:hover {
  background-color: #ffebee;
  color: #c62828;
}

组件中引用 #

<Menu className="custom-menu">
  <Menu.Target>
    <button>打开菜单</button>
  </Menu.Target>
  <Menu.Dropdown>
    <Menu.Item>选项1</Menu.Item>
    <Menu.Item>选项2</Menu.Item>
  </Menu.Dropdown>
</Menu>

注意事项 #

• 避免使用!important提升优先级，优先通过Mantine主题或更具体的选择器实现样式覆盖
• 确保你的样式没有被其他全局CSS或组件样式覆盖，可以通过浏览器开发者工具检查元素样式优先级

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