反应更改蚂蚁并选择背景颜色

Question

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

我遵循了How to change the style of a Ant-Design 'Select' component?中的方法。如果导入了“ antd / dist / antd.css”，则此操作无效。但是，如果未导入“ antd / dist / antd.css”，则会确实更改“选择”的背景颜色。

如何通过导入“ 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

您要查找的className是ant-select-selection-search

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

解决步骤

1. 打开检查器并指向输入。
2. 请参阅用于管理输入的className。在此示例中，它是ant-select-selection-search
3. 更改CSS中的背景颜色。
4. 如果未看到任何更改，请添加!important。