React 更改 antd 选择背景颜色

Question

我正在使用 React Ant 组件。我想更改 Select 的背景颜色。

我遵循How to change the style of a Ant-Design 'Select' component?的方法。如果 'antd/dist/antd.css' 被导入，它就不起作用了。但是，如果 'antd/dist/antd.css' 没有被导入，它确实改变了 Select 的背景颜色。

我应该如何通过导入'antd/dist/antd.css'来改变颜色？下面是react的代码和css

AntdSelect.js

import React from 'react'
import { Select } from 'antd'
import 'antd/dist/antd.css';
import  './antd.css'
const { Option } = Select;

function AntdSelect() {
    return (
        <div>
            <Select
                className="ant-select-selection"
                style={{ width: 200 }}>
                <Option value="Daily">Daily</Option>
                <Option value="Weekly">Weekly</Option>
                <Option value="Monthly">Monthly</Option>
                <Option value="Yearly">Yearly</Option>
            </Select>          
        </div>
    )
}

export default AntdSelect

antd.css

.ant-select-selection {
  background-color: green;
}

目标是将背景颜色更改为绿色： Background green

Answer 1

您要查找的类名是ant-select-selection-search

.ant-select-selection-search {
  background-color: green;
}

解决步骤

1. 打开检查器并指向输入。
2. 查看控制输入的类名。在这个例子中，它是ant-select-selection-search
3. 更改 CSS 中的背景颜色。
4. 如果您没有发现任何变化，请添加 !important。