Remove Padding from antD Dropdown menu item

Issue

There is no prop to apply styles to an ant design menu item. I need to remove padding by altering the antd styles of menu item but my selectors are not doing that: Code Sandbox

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;
    }`;

I am attempting to remove this padding, so my button occupies the entire menu:

Solution

you can use style attribute in menu items -> sample

import React from "react";
import { Row, Col, MenuProps, Dropdown, Space } from "antd";

export default () => {
  const items: MenuProps["items"] = [
    {
      label: "1st menu item",
      key: "0",
      style: { padding: 0 },
    },
    {
      label: "2nd menu item",
      key: "1",
    },
    {
      type: "divider",
    },
    {
      label: "3rd menu item",
      key: "3",
    },
  ];

  return (
    <Row gutter={[24, 24]}>
      <Col span={24}>
        <Dropdown menu={{ items }}>
          <a onClick={(e) => e.preventDefault()}>
            <Space>Hover me</Space>
          </a>
        </Dropdown>
      </Col>
    </Row>
  );
};

Answered By - Akalanka Dissanayake