Question

假设我想将Select组件的标准白色背景颜色更改为绿色。

我的尝试...

<Select
 style={{ backgroundColor: 'green' }}>
   // Options...
</Select>

......没有这样做。

有人能指出我正确的方向吗？

[编辑]

我最终使用Jesper We建议的方法。

覆盖所有选择的颜色......

.ant-select-selection {
  background-color: transparent;
}

...然后我可以单独设置Select组件的样式。

Answer 1

<Select>呈现一整套<div>，您需要查看生成的HTML元素树，以了解您正在做什么。你无法通过style属性来完成它，你需要在CSS中完成它。

附加背景颜色的正确位置是

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

这将使您的所有选择变为绿色。如果您想为不同的选择选择不同的颜色，请给他们个人className。

Answer 2

对于包含Select元素的表单，我在render中有一些代码：

const stateTasksOptions =
    this.tasksStore.filters.init.state.map(item =>
        <Select.Option key={item.id} value={item.id} title={<span className={`${item.id}Label`}>{item.title}</span>}>
            <span className={`${item.id}Label`}>{item.title}</span> - <span class="normal-text">{item.help}</span>
        </Select.Option>
    )

return (
    ....
    <Select
        mode="multiple"
        value={this.tasksStore.filters.selected.state.map(d => d)}
        onChange={this.handleTasksStatus}
        optionLabelProp="title"
    >
        {stateTasksOptions}
    </Select>
    ....
)

还有一些用于着色的CSS。

<强>结果：

Answer 3

尝试使用dropdownStyle而不是样式。

<Select
 dropdownStyle={{ backgroundColor: 'green' }}>
   // Options...
</Select>

dropdownStyle是精选道具之一。

参考：antd select

Answer 4

使用以上所有答案，您无法有条件地更改标签的样式，但使用以下方法，您可以更改。

您可以进行黑客入侵，并根据需要选择select下拉标签的样式。您可以使用带有两个参数的select的dropdownRender

menuNode
道具

使用道具儿童属性来访问每个标签并更改样式，您可以根据需要有条件地更改样式。

下面供参考的是代码沙箱的示例链接

Select Tags Styles Sanbox

这可能不是一种有效的方法，但是您现在可以使用它来满足您的业务需求。

谢谢

Answer 5

他们通过v4蚂蚁设计实现了此功能：
https://github.com/ant-design/ant-design/pull/21064

但是要提防在从v3-> v4盲目升级之前-发生了很多变化：
https://github.com/ant-design/ant-design/issues/20661

Answer 6

有人说选择器是

.ant-select-selection {...

但是应为选择器，如下所示：

.ant-select-selector {
  background-color: green;
}

Answer 7

摘自其官方文档https://pro.ant.design/docs/style

重写组件样式由于项目的特殊需求，我们经常满足覆盖组件样式的需求，这是一个简单的示例。

Antd Select在多选状态下，默认值将显示所有选择项，在这里，当内容超出此高度时，我们为显示滚动条添加一个限制高度。

// TestPage.ts
import { Select } from 'antd';
import styles from './TestPage.less';
const Option = Select.Option;

const children = [];
for (let i = 10; i < 36; i++) {
  children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
}

ReactDOM.render(
  <Select
    mode="multiple"
    style={{ width: 300 }}
    placeholder="Please select"
    className={styles.customSelect}
  >
        {children}
      
  </Select>,
  mountNode,
);

/* TestPage.less */
.customSelect {
  :global {
    .ant-select-selection {
      max-height: 51px;
      overflow: auto;
    }
  }
}

需要注意两点：

CSS模块不会转换导入的antd组件类名称，因此必须将覆盖的类名称.ant-select-selection放在：global中。由于前面的注释，覆盖是全局的。为避免影响其他Select组件，此设置需要使用额外的类名进行包装，以添加范围限制

Answer 8

在 angular 中，您可以使用 ng-deep 覆盖样式

::ng-deep .ant-select-selector {
  background-color: red;
}

如何更改Ant-Design'Select'组件的样式？

8 个答案: