Prime NG - 自动完成 CSS 样式应用

Question

我想了解如何为现有的 PrimeNG autoComplete 组件应用 CSS。

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

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']
})