antd menu padding-left问题

问题描述

问 题

使用antd的Menu，需要调整Menu.Item的padding，加了 style={{paddingLeft:"58px"}}，但是被覆盖了成24px，在antd和rcmenu源码里面找了找不到相关实现（可能我没找到，没发现- -）

如下：

render() {
    return (
        <Menu onClick={this.handleClick}
                style={{ borderRight: '1px solid #e7e7eb',paddingTop:'13px' }}
                defaultOpenKeys={['user']}
                selectedKeys={[this.state.current]}
                mode="inline"
              >
        
              <MenuItemGroup>
                <Menu.Item style={{paddingLeft:"58px"}} key="normalUser">注册用户管理</Menu.Item>
                <Menu.Item style={{paddingLeft:"58px"}} key="group">用户分组管理</Menu.Item>
                <Menu.Item style={{paddingLeft:"58px"}} key="package">用户套餐设置</Menu.Item>
                <Menu.Item style={{paddingLeft:"58px"}} key="systemUser">系统用户管理</Menu.Item>
                <Menu.Item style={{paddingLeft:"58px"}} key="permission">角色权限设置</Menu.Item>
              </MenuItemGroup>
              
              ...
        
        </Menu>
    );
  },

解决方案

从源码中可以看到,当你的Menu mode设置为inline的时候,修改paddingLeft的值需要在Menu组件的inlineIndent property设置一个自定义值.

这篇关于antd menu padding-left问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！