有条件地覆盖 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>
我有一个包含 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>