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

Question

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

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

我希望能够根据条件更改边框(和框阴影)的颜色。我可以通过将以下内容添加到单独的 CSS 文件中来更改/覆盖我需要的 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 状态 bool 值)，我只想将此样式覆盖应用于 Select。我可能会遗漏一些明显的东西，但有兴趣听到任何建议。

Answer 1

为自定义 CSS 代码使用父类名称，并在条件为 true 时将该类名称应用于父元素。

例如， 在你的 CSS 文件中

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

在你的 JSX 文件中，

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