Conditionally override AntD Select styling in CSS-CodePudding

I have a form that contains an antD Select component.

          <Select
            name="SeasonId"
            onChange={onSeasonChange}
            placeholder="Choose Season"
          >
            // Select Options
          </Select>

I want to be able to change the colour of the border (and box shadow) depending on a condition. I am able to change/override the css I need by adding the following into a separate CSS file:

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

.ant-select-focused .ant-select-selector,
.ant-select-selector:focus,
.ant-select-selector:active,
.ant-select-open .ant-select-selector {
  border-color: #1f9643e5 !important;
  outline: 0 !important;
  -webkit-box-shadow: 0 0 0 2px rgba(49, 139, 54, 0.342) !important;
  box-shadow: 0 0 0 2px rgba(49, 139, 54, 0.342) !important;
}

This changes the styling to what I am after:#

However, I only want to apply this style-override to the Select if a certain condition is met in code (i.e. I have an isEditMode state bool). I may be missing something obvious but interested on hearing any suggestions.

CodePudding user response：

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>