问Ant设计Menu.Item自定义风格的反应

EN

import { Layout, Menu } from "antd";
import React from "react";
import styled from "styled-components";
import { Flex } from "../styleComponents/commonUtilsStyles";
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined,
  VideoCameraOutlined,
  UploadOutlined,
} from "@ant-design/icons";
import SubMenu from "antd/lib/menu/SubMenu";

const MenuItem = styled(Menu.Item)`
  .ant-menu-vertical .ant-menu-item::after,
  .ant-menu-vertical-left .ant-menu-item::after,
  .ant-menu-vertical-right .ant-menu-item::after,
  .ant-menu-inline .ant-menu-item::after {
    border-right: 3px solid transparent !important;
  }
`;

const { Header, Sider, Content } = Layout;

const FlexContainer = styled(Flex)`
  background-color: white;
  box-shadow: 6px 6px 32px #cccccc, -6px -6px 32px #f4f4f4;
`;

const HeaderContainer: React.FC = () => {
  return (
    <>
      <Layout>
        <Sider>
          <Menu mode="inline">
            <SubMenu key="submenu" title="number">
              <MenuItem className="no-border" key="1">
                one
              </MenuItem>
              <MenuItem className="no-border" key="2">
                two
              </MenuItem>
              <MenuItem className="no-border" key="3">
                three
              </MenuItem>
            </SubMenu>
            <MenuItem className="no-border" key="11">
              one 1
            </MenuItem>
            <MenuItem className="no-border" key="21">
              two 1
            </MenuItem>
            <MenuItem className="no-border" key="31">
              three 1
            </MenuItem>
          </Menu>
        </Sider>
      </Layout>
      <h1>hello</h1>
    </>
  );
};

export default HeaderContainer;