Ant design Menu.Item react 自定义样式

Question

大家好，我正在使用 React + typescript 学习 ant design。我需要覆盖 Menu.Item 组件中的一些默认样式。但是当用户使用 styleComponent 单击 Menu.Item 时，我无法删除右边框样式。我不知道确切的方法，但我检查了那个组件，我从检查中选择了 className 并使 border-right: 3px solid transparent

但它仍然对我不起作用这是我在下面附加的代码

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;

输出

但我需要在用户单击该菜单时删除该边框线样式

Answer 1

创建一个 css 文件并将 border-right 属性设置为 0px 以便按照类删除右边框。

index.css

.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: 0px;
}

截图：

Ant design Menu.Item react 自定义样式

Ant design Menu.Item custom style in react

reactjs

antd