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.
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" },
]}
/>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.