Реакция: Изменение цвета фона TreeSelect (компонент antD)

Question

Я пытаюсь изменить цвет фона компонента TreeSelect в antD

, пробовал эти способы:

 // 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, стиль не будет отображаться в элементе при его проверке, но если я удалю важное, показанное там, но не вступившее в силу, чтобы стиль antD "ant-select-selector" стал сильнее и переопределив его:

Если я добавлю этот стиль в мои css, это повлияет на все списки, и я хочу стилизовать только определенные c по некоторым логикам c:

 .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"/>