有条件地覆盖 CSS 中的 AntD Select 样式

Conditionally override AntD Select styling in CSS

我有一个包含 antD Select 组件的表单。

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

我希望能够根据条件更改边框(和框阴影)的颜色。通过将以下内容添加到单独的 CSS 文件中,我能够 change/override 我需要的 css:

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

这会将样式更改为我想要的样式:#

但是,如果在代码中满足特定条件(即我有一个 isEditMode 状态,我只想将此 style-override 应用于 Select布尔)。我可能遗漏了一些明显的东西,但有兴趣听取任何建议。

为您的自定义 CSS 代码使用父 class 名称,并在条件为 true.[=13 时将 class 名称应用于父元素=]

例如, 在您的 CSS 文件中

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

并在您的 JSX 文件中,

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