如何更改 Ant Design Select 组件中的占位符颜色？

Question

我想在 Ant Design 中更改 Select 组件的占位符颜色。

我已经在下面尝试了这些，但它们都不起作用。

.ant-select-selection {
  :placeholder-shown {
    color: red !important;
  }
  &:placeholder-shown {
    color: red !important;
  }
  :::placeholder {
    color: red !important;
  }
  color: black !important;
  &::-webkit-input-placeholder {
    color: blue !important;
  }
  &:placeholder {
    color: blue !important;
  }
  :placeholder {
    color: blue !important;
  }
  ::-webkit-input-placeholder {
    color: blue !important;
  }
}

::-webkit-input-placeholder {
  color: blue !important;
}

Answer 1

我尝试了 Hemanthvrm 的建议，但似乎他们在 Ant Design 4 中将占位符元素的类名更改为 .ant-select-selection-placeholder。对我有用的是以下内容：

.ant-select-selection-placeholder {
  color: #f0f0f0;
}

请注意，默认情况下占位符元素上有一个opacity: 0.4;，因此无论您使用什么颜色都会显得淡出。

还要注意，这种占位符样式行为在不同的 Ant 组件中是不一致的。例如，要设置日期范围选择器的占位符的样式，我必须执行以下操作：

.ant-picker-input input::placeholder {
  color: #f0f0f0;
}

坏消息是，所有这些名称可能会在新的主要版本中再次更改。所以最好在一个文件中声明所有与 Ant 相关的样式，这样您的项目就可以轻松地适应这些变化。

Answer 2

这会起作用

.ant-select-selection__placeholder{
  color : blue;
}

工作样本 https://codesandbox.io/s/139lnkwwm3