Conditionally override AntD Select styling in CSS - css

Question

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.

Answer 1

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>