Ant Design 二级菜单添加小圆点并选中变色

要给 Ant Design 的二级菜单加上小圆点，并且选中后变色，可以使用自定义样式来实现。

首先，在菜单的样式中添加一个伪元素来表示小圆点，例如：

.ant-menu-item::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #1890ff;
  margin-right: 8px;
}

然后，在选中的样式中添加一个额外的样式来改变小圆点的颜色，例如：

.ant-menu-item-selected::before {
  background-color: #ff4d4f;
}

最后，在菜单组件中添加自定义的样式类名即可，例如：

import React from 'react';
import { Menu } from 'antd';
import './Menu.css';

const { SubMenu } = Menu;

const MyMenu = () => {
  return (
    <Menu mode="vertical">
      <SubMenu key="sub1" title="Menu 1">
        <Menu.Item key="1">Option 1</Menu.Item>
        <Menu.Item key="2">Option 2</Menu.Item>
        <Menu.Item key="3">Option 3</Menu.Item>
      </SubMenu>
      <SubMenu key="sub2" title="Menu 2">
        <Menu.Item key="4">Option 4</Menu.Item>
        <Menu.Item key="5">Option 5</Menu.Item>
        <Menu.Item key="6">Option 6</Menu.Item>
      </SubMenu>
    </Menu>
  );
};

export default MyMenu;

在上面的例子中，将自定义的样式类名添加到 Menu 组件的 className 属性上，例如：

<Menu mode="vertical" className="my-menu">

然后在样式文件中定义 .my-menu 类名的样式，例如：

.my-menu .ant-menu-item::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #1890ff;
  margin-right: 8px;
}

.my-menu .ant-menu-item-selected::before {
  background-color: #ff4d4f;
}

这样就可以实现 Ant Design 二级菜单加上小圆点，并且选中后变色的效果了。