How to remove padding in Ant Design menu?

Question

I can't figure out how to make the text in my menu be flush left (need to do this to align with other text). In the picture below, I want "One", "Two" and "Three" to be all the way left.

I have tried setting padding and margin to 0 everywhere I can think of, to no avail:

import React, { Component } from "react";
import { Menu, Icon } from 'antd';
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;

class CategoryNav extends React.Component<Props> {
  handleClick = (e: Event) => {
    console.log('click ', e);
  }
  render() {
    return (
      <Menu
        onClick={this.handleClick}
        style={{ width: 256, height: "100%", paddingLeft: 0, marginLeft: 0 }}
        defaultSelectedKeys={['1']}
        defaultOpenKeys={['sub1']}
        mode="inline"
      >
        <SubMenu style={{ paddingLeft: 0, marginLeft: 0 }} key="sub1" title={<span>One</span>}>
          <Menu.Item style={{ paddingLeft: 0, marginLeft: 0 }} key="1">Option 1</Menu.Item>
          <Menu.Item key="2">Option 2</Menu.Item>
          <Menu.Item key="3">Option 3</Menu.Item>
          <Menu.Item key="4">Option 4</Menu.Item>
        </SubMenu>

        <SubMenu key="sub2" title={<span>Two</span>}>
          <Menu.Item key="5">Option 5</Menu.Item>
          <Menu.Item key="6">Option 6</Menu.Item>
        </SubMenu>

        <SubMenu key="sub4" title={<span>Three</span>}>
          <Menu.Item key="9">Option 9</Menu.Item>
          <Menu.Item key="10">Option 10</Menu.Item>
          <Menu.Item key="11">Option 11</Menu.Item>
          <Menu.Item key="12">Option 12</Menu.Item>
        </SubMenu>
      </Menu>
    );
  }
}

export default CategoryNav;

The above code is a minimal example edited slightly from the Ant Design Docs.

EDIT: Here is a screenshot of Chrome's inspector:

I added a custom class in my React code:

    <SubMenu className="categoryNav" key="sub1" title={<span>One</span>}>
      <Menu.Item key="1">Option 1</Menu.Item>

and added this CSS:

.categoryNav .ant-menu-submenu-title {
  padding: 0;
  margin: 0;
}

div.ant-menu-submenu-title {
  padding: 0;
  margin: 0;
}

which seems to have gotten rid of right padding and top/bottom margin, but for some reason I just can't drop the left padding.

Strangely, the inspector says that the left padding comes from inline styling in "element.styles". Does this mean it's impossible to overwrite?

Here's a similar question: https://stackoverflow.com/questions/48149270/how-to-remove-the-default-padding-in-antd. Did you successfully override the styles as is demonstrated and are now having trouble with this one in particular? — Blake Steel, Jun 26 '18 at 20:21
Hey, I'm not sure how to adapt that answer to this case. The answer chooses to style ".ant-collapse-content-box" within the custom class. I don't know what the equivalent subclass should be here. I'm also confused why this kind of digging is necessary--why doesn't setting props style just work? — rampatowl, Jun 26 '18 at 20:28
The inspector is your best friend. Inspect the menu. Also, it has to do with specificity in css. https://stackoverflow.com/questions/11529495/importance-of-css-stylesheet-hierarchy — Blake Steel, Jun 26 '18 at 20:35
As a side-note, using props style isn't good practice (excusable for testing, but I'm not sure if your plan is to continue using it this way after testing) — Blake Steel, Jun 26 '18 at 20:37
I found the right class with Inspect as you suggested, but for the life of me I still can't get rid of the left padding! I updated the question with screenshots from the new attempt. — rampatowl, Jun 26 '18 at 20:57

score 8 · Accepted Answer · answered Jun 27 '18 at 13:40

8

<Menu inlineIndent={0} />

answered Jun 27 '18 at 13:40

afc163

1,628
1
23
35

Hi, is there a documentation on how to customize the styles of ant design? – kaizen Oct 08 '19 at 03:14

score 1 · Answer 2 · answered Jun 26 '18 at 21:15

You could use !important which is not recommended like so:

.categoryNav .ant-menu-submenu-title {
  padding: 0 !important;
  margin: 0 !important;
}

div.ant-menu-submenu-title {
  padding: 0 !important;
  margin: 0 !important;
}

Use this a simple, fast and dirty solution :)

score 0 · Answer 3 · answered Oct 13 '22 at 09:11

0

I had a similar issue and I solved it by inspecting it. There is a class selector, ant-menu-item. You can set this in global CSS files.

    .ant-menu-item{
  margin: 0 !important;
}

answered Oct 13 '22 at 09:11

Brhane Giday

173
1
5

How to remove padding in Ant Design menu?

3 Answers3