javascript - nz-select 可以自定义css吗？nz-select-top-control？

Question

如图我想把nz-select中样式改成用户名input的样式，但我发现如何改都不行。

加入自定义css后

nz-select {  width: 100%;  display: block;  height: calc(1.5em + 0.75rem + 2px);  padding: 0.375rem 0.75rem;  font-size: 1rem;  font-weight: 400;  line-height: 1.5;  color: #495057;  background-color: #fff;  background-clip: padding-box;  border: 1px solid #ced4da;  border-radius: 0.25rem;  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;}

看样子只是包裹起来了，发现多了nz-select-top-control
可是源代码是没有的，这是为什么？

<nz-select nzShowSearch nzAllowClear nzMode="multiple" nzPlaceHolder="用户标签" [compareWith]="compareFn" [nzBorderless]="false" [formControl]="tagSelect" (nzOnSearch)="onSearch($event)">  <nz-option nzCustomContent *ngFor="let tag of tags" [nzLabel]="tag.name" [nzValue]="tag">    {{tag.name}}  </nz-option></nz-select>

Answer 1

nz-select 是 Ant Design 的组件库中的选择器组件，可以通过覆盖其样式来达到自定义的目的。您提供的 CSS 代码看起来是正确的，应该能够改变 nz-select 的样式。但是，如果您在尝试更改样式时遇到了问题，可能有以下几种可能的原因：

1. 选择器优先级问题：CSS 选择器之间存在优先级，更具体的选择器将覆盖更通用的选择器。例如，如果您的组件内部有一个更具体的类名或 ID 选择器，它可能会覆盖您定义的 nz-select 选择器。
2. 作用域问题：如果您在组件内部定义了样式，但是该样式没有正确地应用到组件上，那么可能是作用域问题。在 Angular 中，您可以使用 /deep/ 或 ::ng-deep 选择器来穿透作用域限制。
3. 浏览器兼容性问题：虽然大多数现代浏览器都支持 CSS，但是有些老版本的浏览器可能不支持某些特性。请确保您的 CSS 代码在目标浏览器中可以正确工作。
4. Ant Design CSS 覆盖：Ant Design 的 CSS 可能已经覆盖了 nz-select 的默认样式。您可以尝试通过为 Ant Design 的 CSS 添加 !important 标志来覆盖样式，但是这种方法可能会导致其他样式问题，因为它会破坏 CSS 的级联规则。

关于 nz-select-top-control，这是 Ant Design Select 组件的一个子组件，通常用于显示已选项的标签。如果这个组件没有显示出来，可能是因为它还没有被渲染出来，或者相关的作用域没有被正确设置。

如果以上方法都不能解决您的问题，建议您提供更多的代码和错误信息，以便我们能够更好地帮助您。