[英]How to remove padding in Ant Design menu?
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: 我试图在我能想到的所有地方将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;
The above code is a minimal example edited slightly from the Ant Design Docs . 上面的代码是从Ant Design Docs稍作编辑的最小示例。
EDIT: Here is a screenshot of Chrome's inspector: 编辑:这是Chrome检查器的屏幕截图:
I added a custom class in my React code: 我在我的React代码中添加了一个自定义类:
<SubMenu className="categoryNav" key="sub1" title={<span>One</span>}>
<Menu.Item key="1">Option 1</Menu.Item>
and added this CSS: 并添加了以下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". 奇怪的是,检查人员说,左侧填充来自“ element.styles”中的内联样式。 Does this mean it's impossible to overwrite? 这是否意味着不可能覆盖?
<Menu inlineIndent={0} />
\n
You could use !important which is not recommended like so: 您可以使用!important,不建议这样使用:
.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 :) 使用这个简单,快速且肮脏的解决方案:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.