如何移除Ant Design下拉菜单项内边距？自定义样式未生效求助

问题说明 #

Ant Design下拉菜单项没有专属的样式配置属性，尝试通过修改内置样式移除内边距，但编写的CSS选择器始终不生效。现有代码如下：

const StyledDropdown = styled(Dropdown)`
     .ant-dropdown-menu-item.ant-dropdown-menu-item-only-child {
      padding: 0px !important;
      }
      li.ant-dropdown-menu-item {
      padding: 0px !important;
      }
      .ant-dropdown{
      padding: 0px !important;
      border: 2px solid red !important;
      }
      .ant-dropdown-menu{
      padding: 0px !important;
      border: 2px solid red !important;
      }
      .ant-dropdown-menu-item {
      padding: 0px !important;
    }`;

需求是移除下拉菜单的内边距，让菜单内的按钮能填满整个下拉容器。

可行解决方案 #

方案1：通过dropdownRender让样式穿透 #

Ant Design默认会把下拉菜单渲染到body节点下，导致styled-components的样式无法作用到菜单（DOM结构脱离了StyledDropdown容器）。用dropdownRender把菜单挂载到当前组件节点内，就能让样式生效：

const StyledDropdown = styled(Dropdown)`
  & .ant-dropdown-menu {
    padding: 0;
    border: 2px solid red;
  }
  & .ant-dropdown-menu-item {
    padding: 0 !important;
  }
`;

// 使用组件时配置dropdownRender
<StyledDropdown
  dropdownRender={menu => <div>{menu}</div>}
  menu={{ items: 你的菜单项数组 }}
>
  <Button>触发下拉</Button>
</StyledDropdown>

方案2：用全局样式加限定类名 #

如果不想修改渲染结构，可以写全局样式，给Dropdown外层加专属类名避免污染其他组件：

/* 全局CSS文件中添加 */
.custom-dropdown .ant-dropdown-menu {
  padding: 0;
}
.custom-dropdown .ant-dropdown-menu-item {
  padding: 0 !important;
}

// 组件中使用
<div className="custom-dropdown">
  <Dropdown menu={{ items: 你的菜单项数组 }}>
    <Button>触发下拉</Button>
  </Dropdown>
</div>

方案3：通过menuProps给菜单传类名 #

直接给下拉菜单指定自定义类名，再写对应样式：

<Dropdown
  menu={{
    items: 你的菜单项数组,
    className: "zero-padding-menu"
  }}
>
  <Button>触发下拉</Button>
</Dropdown>

.zero-padding-menu {
  padding: 0;
}
.zero-padding-menu .ant-dropdown-menu-item {
  padding: 0 !important;
}

内容的提问来源于stack exchange，提问作者user12562497