反应：更改TreeSelect（antD组件）的背景颜色

Question

我正在尝试更改antD的TreeSelect组件的背景颜色

尝试了以下方法：

 // const bgColor = element.Style !== undefined && element.Style === Constants.StyleModes.MAJOR ?
                    //     "#CFECF5" : "white" //TODO - didn't override the ant-select-selector

                    // const listStyle = element.Style !== undefined && element.Style === Constants.StyleModes.MAJOR ?
                    //     "small-font styled-element" : "small-font"
                    elements.push(
                        <td className="view-cell" align="left">
                            {element.Name}
                            <br/>
                            <TreeSelect
                                className="small-font"
                                style={{ width: '100%', fontSize: 'small' /*, backgroundColor: bgColor*/}}

但是没有生效； 如果我在bgColor const中添加“！important”，则样式在检查时未显示在元素中，但是如果删除了其中显示的重要内容，但没有生效而导致antD样式“ ant-select-selector”更强并且覆盖它：

如果我将此样式添加到CSS中，它将影响所有列表，并且我只想根据某些逻辑来设置特定样式的样式：

 .ant-select-selector {
    background-color: #CFECF5 !important;
}

Answer 1

尝试一下（您可以在DevTools中看到正确的选择器）：

.treeSelect.ant-select-single:not(.ant-select-customize-input)
  .ant-select-selector {
  background-color: aliceblue;
}

<TreeSelect className="treeSelect"/>