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

Posted 2023-02-22

【中文标题】如何更改 Ant-Design \'Select\' 组件的样式？

【英文标题】：How to change the style of a Ant-Design 'Select' component?如何更改 Ant-Design 'Select' 组件的样式？

【发布时间】：2018-09-05 21:35:45

【问题描述】：

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

我的尝试...

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

...没有这样做。

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

[编辑]

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

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

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

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

【问题讨论】：

你能给我们一个关于 Codesandbox 的工作示例

【参考方案1】：

<Select> 渲染了一整套<div>s，你需要看看生成的 html 元素树来了解你在做什么。不能通过 style 属性来做，需要在 CSS 中做。

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

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

这将使您的所有选择变为绿色。如果您想为不同的选择提供不同的颜色，请给他们单独的classNames。

【讨论】：

如果你使用 css 模块，你可以这样做： .myClassName :global .ant-select-selector background-color: #f50c5b;

如果我使用样式组件怎么办？

如果您使用多个选择组件，可能会出现问题。在这种情况下效果不佳。

【参考方案2】：

尝试使用 dropdownStyle 代替样式。

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

dropdownStyle 是选择道具之一。

参考：antd select

【讨论】：

这只会对下拉菜单中的项目进行样式设置，不幸的是根本不会影响选择输入。

如果你想改变悬停的样式怎么办？如果你把'&:hover' : backgroundColor: 'red'

【参考方案3】：

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

const stateTasksOptions =
    this.tasksStore.filters.init.state.map(item =>
        <Select.Option key=item.id value=item.id title=<span className=`$item.idLabel`>item.title</span>>
            <span className=`$item.idLabel`>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。

结果：

【参考方案4】：

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

您可以根据自己的喜好更改选择下拉列表标签的样式。 您可以使用带有 2 个参数的 select 的 dropdownRender

菜单节点 道具

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

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

Select Tags Styles Sanbox

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

谢谢

【参考方案5】：

他们用 ant design v4 实现了这个功能：https://github.com/ant-design/ant-design/pull/21064

但在盲目地从 v3 -> v4 升级之前要小心 - 很多东西都发生了变化：https://github.com/ant-design/ant-design/issues/20661

【参考方案6】：

有人说选择器是

.ant-select-selection ...

不过应该​​是selector如下：

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

【参考方案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;
    
  

需要注意两点：

导入的 antd 组件类名没有被 CSS Modules 翻译，所以覆盖的类名 .a​​nt-select-selection 必须放在 :global 中。 由于前面的注释，覆盖是全局的。为避免影响其他 Select 组件，设置需要用额外的类名包裹，以添加范围限制

【讨论】：

“为避免影响其他 Select 组件，设置需要用额外的类名包裹以添加范围限制”是什么意思？

【参考方案8】：

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

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