如何删除 Ant Design 菜单中的填充？

Question

我不知道如何使菜单中的文本左对齐（需要这样做才能与其他文本对齐）。在下图中，我希望 "One"、"Two" 和 "Three" 一直在左边。

我试过将 padding 和 margin 设置为 0，但无济于事：

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;

以上代码是对 Ant Design Docs.

稍作编辑的最小示例

编辑：这是 Chrome 检查器的屏幕截图：

我在我的 React 代码中添加了自定义 class：

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

并添加了这个 CSS:

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

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

这似乎已经摆脱了右填充和 top/bottom 边距，但由于某种原因我无法删除左填充。

奇怪的是，检查员说左填充来自 "element.styles" 中的内联样式。这是否意味着无法覆盖？

Answer 1

您可以使用不推荐的 !important，如下所示：

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

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

使用这个简单、快速但肮脏的解决方案:)

Answer 2

<Menu inlineIndent={0} />

如何删除 Ant Design 菜单中的填充？

How to remove padding in Ant Design menu?

css

padding

reactjs

antd