Overwrite css classes in antd select

January 23, 2023

With the below code I’m trying to remove padding around the select options. In the screenshot below we could see padding around names while we hover.

codesandbox: https://codesandbox.io/s/basic-usage-antd-5-1-6-forked-41s3yb?file=/demo.tsx

import styled from "styled-components";
import "./index.css";
import { Select, Space } from "antd";

const handleChange = (value: string) => {
  console.log(`selected ${value}`);
};

const StyledSelect = styled(Select)`
  .ant-select-dropdown-menu {
    padding: 0px !important;
  }
`;

const App: React.FC = () => (
  <Space wrap>
    <StyledSelect
      defaultValue="lucy"
      style={{ width: 120 }}
      onChange={handleChange}
      options={[
        { value: "jack", label: "Jack" },
        { value: "lucy", label: "Lucy" },
        { value: "Yiminghe", label: "yiminghe" }
      ]}
    />
  </Space>
);

export default App;

On inspecting I saw .ant-select-dropdown-menu has a padding of 4px , but I need some help in overwriting that class to 0px. Thanks.

>Solution :

According to the antd document, the prop dropdownStyle can be used to style the dropdown menu with CSS properties.

To remove the padding for the dropdown, perhaps try add dropdownStyle={{ padding: "0px" }} as the prop of Select.

Forked demo with modification: codesandbox

<Select
  defaultValue="lucy"
  // 👇 Added this
  dropdownStyle={{ padding: "0px" }}
  style={{ width: 120 }}
  onChange={handleChange}
  options={[
    { value: "jack", label: "Jack" },
    { value: "lucy", label: "Lucy" },
    { value: "Yiminghe", label: "yiminghe" },
  ]}
/>