How To Set Custom Style To Antd 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.desig

Solution 1:

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: 0px8px8px0px;
  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: 4px5px5px14px!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.