[英]How to set custom style to antd Select?
I want to customise antd Select
.我想定制 antd
Select
。 When a user click on Select
the antd Option
should display over antd Select
instead of displaying beneath the Select
当用户点击
Select
时,antd Option
应显示在 antd Select
,而不是显示在Select
下方
antd Select
: https://ant.design/components/select/蚂蚁
Select
: https://ant.design/components/select/
JSX JSX
import { FaPlane, FaWater } from "react-icons/fa";
//outside of class
const shipmentType = {
sea: [
{ name: "FCL", desc: "FULL CONTAINER LOAD" },
{ name: "LCL", desc: "LESS CONTAINER LOAD" }
],
air: [{ name: "AIR", desc: "AIR DELIVERY" }]
};
//inside of class
render(){
return(
<Select
className="container-dropdown"
onChange={this.onSelectChange}
defaultValue={
<DisplayContainer data={shipmentType.sea[0]} />
}
key={ shipmentType.sea[0]}
>
<Option value={shipmentType.sea[0].name}>
<DisplayContainer data={shipmentType.sea[0]} />
</Option>
<Option value={shipmentType.sea[1].name}>
<DisplayContainer data={shipmentType.sea[1]} />
</Option>
</Select>
);
}
DisplayContainer.js component DisplayContainer.js 组件
const DisplayContainer = ({ data }) => {
return (
<div
style={{
width: "120px",
height: "45px",
display: "flex",
flexFlow: "column",
justifyContent: "center",
alignItems: "center"
}}
>
<span
style={{
display: "block",
fontSize: "8px",
padding: "5px 0px 0px 10px"
}}
>
{data.desc}
</span>
<span style={{ padding: "2px 0px 0px 14px" }}>
{data.name === "AIR" ? <FaPlane /> : <FaWater />}
<span
style={{ display: "inline", marginLeft: "14px", fontSize: "16px" }}
>
{data.name}
</span>
</span>
</div>
);
};
App.css应用程序.css
.container-dropdown {
height: 53px;
width: 140px;
border: 0px solid white;
border-radius: 0px;
cursor: pointer;
font-size: 18px;
margin: 0px;
padding: 0px;
}
custom-antd.css定制-antd.css
.ant-select-selection.ant-select-selection--single {
border-radius: 0px 8px 8px 0px;
height: 53px;
}
.ant-select-selection-selected-value {
height: 53px;
padding: 0px;
margin: 0px;
}
.ant-select-selection__rendered {
padding: 0px;
margin: 0px;
}
.ant-select-dropdown-menu.ant-select-dropdown-menu-root.ant-select-dropdown-menu-vertical {
padding: 0px;
margin: 0px;
}
.ant-select-dropdown-menu-item {
padding: 0px;
margin: 0px;
}
How can I achieve this?我怎样才能做到这一点? I have already spent hours of time.
我已经花了几个小时的时间。 but I couldn't succeed.
但我无法成功。 I will appreciate you.
我会感激你的。 thank you
谢谢你
Edit 01:编辑01:
When a user clicks the Select
box当用户点击
Select
框时
I want the top Option
(ie FCL
) goes up and cover the Select
box like this:我希望顶部
Option
(即FCL
)上升并覆盖Select
框,如下所示:
I don't want both the Options
(ie FCL
and LCL
)to be displayed below Select
box:我不希望
Options
(即FCL
和LCL
)都显示在Select
框下方:
I believe I have been able to get pretty close to what you are looking to achieve.我相信我已经能够非常接近您想要实现的目标。 Below is the updated custom-antd.css file.
下面是更新的custom-antd.css文件。
.ant-select-selection-selected-value {
border-radius: 0px 8px 8px 0px;
height: 53px;
}
.ant-select-selection.ant-select-selection--single {
height: 53px;
}
.ant-select-selection.ant-select-selection--single
> div
> div
> div
> div
+ div {
margin-top: -5px;
padding: 4px 5px 5px 14px !important;
}
.ant-select-selection.ant-select-selection--single > div > div > div > div {
margin-top: -20px;
}
.ant-select-selection.ant-select-selection--single[aria-expanded="true"]
> div
> div
> div
> div {
margin-top: -10px;
}
/*style for when the menu is expanded: show shipment description above icon and name*/
.ant-select-selection.ant-select-selection--single[aria-expanded="true"]
> div
> div
> div
> div
+ div {
margin-top: -15px;
}
The complete code sandbox can be found here .完整的代码沙箱可以在这里找到。
Essentially what you want to do is use combinators to select the specific div
's for the name, the description, etc. which ant design nests pretty deep in their structure.基本上你想要做的是使用组合符 select 特定
div
的名称、描述等,其中 ant 设计在其结构中嵌套得很深。
EDIT编辑
In order to get the dropdown menu to display different data based on what is currently selected (show LCL only when FCL is selected, vice versa), you can utilize an handleChange function that filters the original shipment data so it returns everything that is not currently selected (ie showing LCL without FCL when FCL is selected).为了让下拉菜单根据当前选择的内容显示不同的数据(仅在选择 FCL 时显示 LCL,反之亦然),您可以使用 handleChange function 过滤原始货件数据,以便返回当前不存在的所有数据已选中(即在选择 FCL 时显示 LCL 而没有 FCL)。 By storing the original shipment data in state, along with a second array (filtered menu data), you can use/update the second array for your selection options.
通过将原始装运数据存储在 state 以及第二个数组(过滤的菜单数据)中,您可以使用/更新第二个数组作为您的选择选项。
Here is your state.这是您的 state。
this.state = {
shipmentArr: [],
shipmentType: {
sea: [
{ name: "FCL", desc: "FULL CONTAINER LOAD" },
{ name: "LCL", desc: "LESS CONTAINER LOAD" }
],
air: [{ name: "AIR", desc: "AIR DELIVERY" }]
}
};
Here is the new handleChange
.这是新的
handleChange
。
handleChange = value => {
var newShipmentType = this.state.shipmentType.sea.filter(x => {
return x.name !== value;
});
this.setState({
shipmentArr: newShipmentType
});
};
Here is the componentDidMount
(utilizing handleChange
).这是
componentDidMount
(使用handleChange
)。
componentDidMount = () => {
this.handleChange(this.state.shipmentType.sea[0].name);
};
Below is the updated Select
component.下面是更新的
Select
组件。
<Select
className="container-dropdown"
onChange={this.handleChange}
open={true} // USE THIS FOR DEBUGGING.
defaultValue={
<DisplayContainer data={this.state.shipmentType.sea[0]} />
}
key={this.state.shipmentArr[0]}
>
{this.state.shipmentArr.map(x => {
return (
<Option value={x.name}>
<DisplayContainer data={x} />
</Option>
);
})}
</Select>
See the full updated codepen .查看完整更新的 codepen 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.