angular - Primeng - 自动完成 CSS 样式应用

Question

我想了解如何将 CSS 应用于现有的 PrimeNG 自动完成组件。

我正在寻找的变化是，输入文本颜色应该是白色。

HTML 文件(top-bar.component.html)

<p-autoComplete styleClass="myclass" [(ngModel)]="brand" [suggestions]="filteredBrands" (completeMethod)="filterBrands($event)" [size]="20" [minLength]="1"
      placeholder="Search" [dropdown]="true" (keyup.enter)="populateResults($event)">
    </p-autoComplete>

CSS 类 (top-bar.component.css)

.myclass .ui-autocomplete .ui-autocomplete-input {
  color: white;
}

组件类(top-bar.component.ts)

@Component({
  selector: 'app-top-bar',
  templateUrl: './top-bar.component.html',
  styleUrls: ['./top-bar.component.css']
})

有人可以帮我解决这个问题吗？

谢谢

Answer 1

我可以通过@Aravind 建议链接修复它。从 :host >>> 中删除了 styleClass 并修改了 css。

如果 css 文件是 scss 类型，那么使用 ::ng-deep

HTML 文件(top-bar.component.html)

<p-autoComplete [(ngModel)]="brand" [suggestions]="filteredBrands" (completeMethod)="filterBrands($event)" [size]="20" [minLength]="1"
      placeholder="Search" [dropdown]="true" (keyup.enter)="populateResults($event)">
    </p-autoComplete>

CSS 类 (top-bar.component.css)

:host >>> .ui-autocomplete .ui-autocomplete-input {
  color: white;
}

IF SCSS 类 (top-bar.component.scss)

:host ::ng-deep .ui-autocomplete .ui-autocomplete-input {
  color: white;
}

组件类(top-bar.component.ts)

@Component({
  selector: 'app-top-bar',
  templateUrl: './top-bar.component.html',
  styleUrls: ['./top-bar.component.css']
})