javascript - React：更改 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*/}}

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

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

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

标签： javascriptcssreactjsantd

Answer 1

试试这个（你可以在 DevTools 中看到正确的选择器）：

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

<TreeSelect className="treeSelect"/>