Search code examples
reactjsantd

Ant design Menu.Item custom style in react

Hi everyone i learning ant design with React + typescript. i need to override some default styles in Menu.Item components. but i have a problem with remove border-right style when user click that Menu.Item using styleComponent. i don't know the exact way but i inspect that component and i picked the className from inspection and made border-right: 3px solid transparent

but still it didn't work for me Here is the code i attach below

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;

output

enter image description here

but i need to remove that border line style when user click that menu it

Solution

  • Create a css file and set the border-right property to 0px for following classes to remove the right border.

    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;
}

    Screenshot:

    screenshot