Ant设计React中的Menu.Item自定义样式

Question

大家好，我正在学习使用 React + Typescript 进行 ant 设计。我需要覆盖 Menu.Item 组件中的一些默认样式。但是当用户使用 styleComponent 单击该 Menu.Item 时，我在删除右边框样式时遇到问题。我不知道确切的方法，但我检查了该组件，并从检查中选择了 className 并将 border-right: 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;

输出

下面附加的代码

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

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

屏幕截图：

Answer 2

我发现最好的方法是使用 Emotion React

import styled from "@emotion/styled";
import { Menu } from "antd";

然后覆盖样式（你需要检查才能知道 antd css 类）

/**
 * ant-menu-item:hover::after
 * ant-menu-item-selected
 * ant-menu-item-selected:after
 */

const CustomMenu = styled(AntMenu)`
    && .ant-menu-item:hover::after {
        border-bottom: 0px solid transparent;
    }
    
    && .ant-menu-item-selected {
        background-color: #EEF6F7;
        border-top: 4px solid #B80012;
        border-radius: 0px;
        color: #B80012;
    }    

    && .ant-menu-item-selected:after {
        border-bottom-width: 0px;        
        border-bottom-color: transparent;
    }
`;

最后，将其用作组件

return (
    <ConfigProvider theme={theme}>
        <CustomMenu
            onClick={onClick}
            selectedKeys={[current]}
            mode="horizontal"
            items={menuItems}
            {...props}
        />                
    </ConfigProvider>
);

这就是我在 Storybook 中测试的方式
自定义 AntDesign 水平菜单

说明
为什么我们可以这样做？

• 首先，Emotion 样式组件的 styled 可以为任何组件设置样式，只要它接受 className 属性即可。 https://emotion.sh/docs/styled
• 其次，我们查看 Ant Design 源码，前往菜单组件，我们会在这一行看到index.tsx import InternalMenu import InternalMenu from './menu';
• 然后，我们进入menu.tsx，它导出InternalMenu 组件并在此处查看其属性 const InternalMenu =forwardRef((props, ref) => {...}
• 并向下滚动，在解构部分它有 const { prefixCls:customizePrefixCls, className,...restProps} = props;

=> 这里你可以看到它接受className 属性，这意味着您可以应用 EmotionJS 提供的样式组件方法，

玩得开心

:)