How to Change the Style of a Ant-Design 'Select' Component

How to change the style of a Ant-Design 'Select' component?

<Select> renders a whole set of <div>s, you need to take a look at the resulting HTML element tree to understand what you are doing. You can't do it through the style attribute, you need to do it in CSS.

The proper place to attach a background color is

.ant-select-selection {
  background-color: green;
}

This will make all your selects green. Give them individual classNames if you want different colors for different selects.

Ant Design change style Select Component

You can find the answer here.

in short,
you need to style inline div with the below class

.ant-select-selection {
  background-color: green;
}

React change antd select background color

The className which you're looking for is ant-select-selection-search

.ant-select-selection-search {
  background-color: green;
}

SOLVING STEPS

1. Open up your inspector and point to the input.
2. See the className which governs the input. In this example, it's ant-select-selection-search
3. Change the background color in your css.
4. If you see no changes, add !important.

How to set custom style to antd 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.

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

Conditionally override AntD Select styling in CSS

Use a parent class name for your custom CSS code, and apply the class name to a parent element when the condition is true.

Example,
in your CSS file

.example.ant-select-selector:hover {
  border-color: #1f9643e5 !important;
}

and in your JSX file,

<div className = {`${conditon ? 'example' :''}`} >
   <Select />
</div>

---

Related Topics