大家好，我学习Ant Design与React+ typescript。我需要覆盖菜单中的一些默认样式。项目组件。但我有一个问题，删除右边框样式时，用户单击该菜单。项目使用styleComponent。我不知道确切的方式，但我检查该组件，我从检查中选择类名，并使右边框：3px实心透明
但它仍然没有为我工作这里是我下面附上的代码

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;

输出

但我需要到删除的边界线样式时，用户单击该菜单它