如何将自定义样式设置为antd Select? [英] How to set custom style to antd Select?

查看：1323
本文介绍了如何将自定义样式设置为antd Select?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我要自定义antd Select.当用户单击Select时，antd Option应该显示在antd Select上方，而不是显示在Select

下方

antd Select: https://ant.design/components/select/

预期的行为: 1

实际行为:

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框下方:

解决方案

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

可以在此处找到完整的代码沙箱. >

基本上，您想要做的是使用组合器为名称，描述等选择特定的div，这些蚂蚁的设计嵌套在它们的结构中.

编辑

为了获得下拉菜单，以根据当前选择的内容显示不同的数据(仅在选择FCL时显示LCL，反之亦然)，您可以利用handleChange函数来过滤原始的装运数据，以便返回所有当前未选择(即，选择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>

请参阅完整的更新的密码笔.

I want to customise antd Select. When a user click on Select the antd Option should display over antd Select instead of displaying beneath the Select

antd Select: https://ant.design/components/select/

Expected behaviour:1

Actual behaviour:2

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

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

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:

When a user clicks the Select box

I want the top Option (i.e. FCL) goes up and cover the Select box like this:

I don't want both the Options (i.e. FCL and LCL)to be displayed below Select box:

解决方案

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.

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

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 (i.e. showing LCL without FCL when FCL is selected). 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.

Here is your 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 = value => {
   var newShipmentType = this.state.shipmentType.sea.filter(x => {
     return x.name !== value;
   });
   this.setState({
     shipmentArr: newShipmentType
   });
};

Here is the componentDidMount (utilizing handleChange).

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

Below is the updated Select component.

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

这篇关于如何将自定义样式设置为antd Select?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆