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

发布于03月19日

我有一个表单，其中包含一个antD Select组件.

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

我希望能够改变 colored颜色的边界(和框阴影)根据条件.我可以通过在单独的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.我可能错过了一些明显的东西，但我对听到任何建议都感兴趣.

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

推荐答案

Css相关问答推荐

与Chrome和Edge相比，背景位置动画在Firefox中运行并不流畅

需要Angular material 下拉面板有向下和向上箭头按钮

日期面板未与Angular中的日期控件对齐

显示Reaction组件上的问题.使用FlexBox时的意外大小

设置项目的最大宽度和最大高度

本机CSS嵌套混乱

当弯曲方向设置为列时如何制作等高卡片？

有没有办法将px单位添加到 Sass mixin 的参数数组中？

我可以拆分我的 CSS / SASS webpack 加载器规则，还是它们需要成为一个大规则？

如何使 css 不重复同一个类？

如何在 Tailwind 中使用 `margin： y x;` 速记？

为什么过渡属性不适用于 box-shadow？

如何创建一个与 Bootstrap 3 配合得很好的粘性页脚

CSS类和id同名

在 RC.1 中，某些样式无法使用绑定语法添加

将一行文本保留为单行 - 换行或不换行

如何动态生成用逗号分隔的类列表？

完成后如何防止css3动画重置？

使用 inline-block 换行？

为什么 CSS 中的光标：指针效果不起作用