我如何更改 css 属性

Question

我需要改变antd的颜色select。

在上图中，我需要对 ant-select-selection-item 进行更改，但调用它会改变每个 antd select。因此，我给 select、

自定义了一个名称

             <Select
                className="mcq-selected-answer"
                mode="multiple"
                disabled={true}
                style={{ width: "100%", marginTop: "5px" }}
              >
               //Code
              </Select>

在上面，尝试将自定义值（需要更改颜色）作为内联，但这会改变它。还尝试访问 class、

.ant-select.mcq-selected-answer.ant-select-multiple.ant-select-disabled.ant-select-show-search.ant-select-selector.ant-select-selection-overflow.ant-select-selection-overflow-item.ant-select-selection-item {
  background-color: red;
}

但无法访问 ant-select-selection-item。

Answer 1

由于您有自定义 className，您可以使用以下方法更改 ant-select-selection-item：

.mcq-selected-answer .ant-select-selection-item {
  background: red;
}

在您的codesandbox示例中，为了使边框生效，您需要提供更“精确”的css路径

.mcq-selected-answer .ant-select-selection-overflow-item .ant-select-selection-item {
  background: white;
  border: 2px solid blue;
  border-radius: 10px;
}

example

我如何更改 css 属性

how do I change a css property

css

reactjs

antd