javascript 如何将自定义样式设置为antd Select？

tjvv9vkg 于 2023-09-29 发布在 Java

关注(0)|答案(2)|浏览(114)

我想定制antd Select。当用户单击Select时，antd Option应显示在antd Select上方，而不是显示在Select下方
antd Select：https://ant.design/components/select/
预期行为：

1
实际行为：

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组件

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

.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

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

我如何才能做到这一点？我已经花了几个小时的时间。但我没能成功我会感激你的。谢谢你
编辑01：

用户点击Select框时

我想要顶部的Option（即FCL）向上移动，覆盖Select框，如下所示：

我不想同时使用Options（即FCL和LCL）显示在Select框下方：

JavaScript

来源：https://stackoverflow.com/questions/58492391/how-to-set-custom-style-to-antd-select

2条答案

按热度按时间

1wnzp6jl1#

我相信我已经能够非常接近你想要实现的目标。下面是更新后的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;
}

完整的代码沙盒可以在here中找到。
本质上，您要做的是使用组合子为名称、描述等选择特定的div。蚂蚁的设计巢在它们的结构中很深。

编辑

为了让显示菜单根据当前选择的内容显示不同的数据（仅在选择FCL时显示LCL，反之亦然），您可以使用显示更改功能，过滤原始装运数据，以便返回当前未选择的所有内容（即当选择FCL时，显示没有FCL的LCL）。通过将原始货件数据与第二个数组（已过滤的菜单数据）一起存储在状态中，您可以使用/更新第二个数组作为您的选择选项。
这是你的状态。

this.state = {
     shipmentArr: [],
     shipmentType: {
        sea: [
          { name: "FCL", desc: "FULL CONTAINER LOAD" },
          { name: "LCL", desc: "LESS CONTAINER LOAD" }
        ],
        air: [{ name: "AIR", desc: "AIR DELIVERY" }]
     }
  };

这是新的handleChange。

handleChange = value => {
   var newShipmentType = this.state.shipmentType.sea.filter(x => {
     return x.name !== value;
   });
   this.setState({
     shipmentArr: newShipmentType
   });
};

下面是componentDidMount（使用handleChange）。

componentDidMount = () => {
    this.handleChange(this.state.shipmentType.sea[0].name);
};

下面是更新的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>

查看完整的updated codepen

赞(0）回复(0）举报 2023-09-29

juud5qan2#

在版本“antd”上：“^5.9.3”，你可以使用这个css来改变选择元素

:where(.css-dev-only-do-not-override-1ck3jst).ant-select-single:not(.ant-select-customize-input) .ant-select-selector{
  height: 40px !important;
  padding-top: 5px;
  box-shadow: 02px 5px 10px 0 #9191911f;
  border:1px solid #646cff75;
  background-color:#f6f6f6 ;
}

赞(0）回复(0）举报 2023-09-29

我来回答

javascript 如何将自定义样式设置为antd Select？

2条答案

相关问题

热门标签

最新问答