轻松定制 Ant Design 菜单：自定义选中样式，玩转一级和多级菜单

自定义 Ant Design 菜单选中样式

浅析 Ant Design 菜单的基本用法

Ant Design 的菜单组件是构建高效用户界面的关键工具。它提供了各种菜单类型，包括水平菜单、垂直菜单和下拉菜单。通过设置 mode 属性，我们可以指定所需菜单类型。例如，mode="horizontal" 表示水平菜单，而 mode="vertical" 表示垂直菜单。

要添加菜单项，可以使用 Menu.Item 组件。每个 Menu.Item 组件表示一个菜单项，我们可以通过设置 key 属性来唯一标识它们。点击菜单项时，会触发 onClick 事件，我们可以监听该事件执行相应操作。

import { Menu, Menu.Item } from 'antd';

const MyMenu = () => (
  <Menu mode="horizontal">
    <Menu.Item key="1">首页</Menu.Item>
    <Menu.Item key="2">关于我们</Menu.Item>
    <Menu.Item key="3">联系我们</Menu.Item>
  </Menu>
);

export default MyMenu;

自定义 Ant Design 菜单选中样式

Ant Design 的默认选中样式是给选中的菜单项添加蓝色背景。如果我们想对其进行自定义，有两种方法：CSS 覆盖和自定义主题功能。

使用 CSS 覆盖

CSS 覆盖是最简单的方法。我们可以创建一个新的 CSS 文件，然后在其中编写自定义样式规则。例如，以下 CSS 规则可以修改选中菜单项的背景色：

/* 选中菜单项的背景色 */
.ant-menu-item-selected {
  background-color: #f00 !important;
}

将其添加到项目中，即可覆盖 Ant Design 的默认样式。需要注意的是，CSS 覆盖时自定义样式规则需要具有更高的优先级，可以使用 !important 来提升优先级。

使用 Ant Design 自定义主题功能

Ant Design 还提供了自定义主题功能，可以通过修改变量来改变组件样式。为此，我们需要创建一个新的主题文件，并修改变量值。例如，以下主题文件可以修改选中菜单项的背景色：

// 自定义主题文件
// 选中菜单项的背景色
@menu-item-active-bg: #f00 !important;

将其导入项目中，自定义主题样式即可生效。需要注意的是，使用自定义主题功能时，需要在项目中引入 antd/dist/antd.less 文件。

使用哪种方法？

CSS 覆盖方法更简单、直接，但自定义主题功能更灵活、可扩展。如果需要快速简单地进行自定义，可以使用 CSS 覆盖。如果需要更深入的自定义或在多个项目中使用，则可以使用自定义主题功能。

常见问题解答

• 如何让选中菜单项突出显示？

  • 可以通过修改背景色、添加边框或阴影等方式让选中菜单项突出显示。

• 如何禁用选中菜单项？

  • 可以通过设置 disabled 属性为 true 来禁用选中菜单项。

• 如何更改选中菜单项的字体颜色？

  • 可以通过修改 color 属性来更改选中菜单项的字体颜色。

• 如何添加图标到选中菜单项？

  • 可以通过使用 icon 属性向选中菜单项添加图标。

• 如何让选中菜单项的背景平滑过渡？

  • 可以通过修改 transition 属性来让选中菜单项的背景平滑过渡。