如何设置 PrimeNg 组件的样式？

Question

所以我在当前的项目中使用 PrimeNg Liberary 并尝试设置该库的组件样式，但问题是我们无法使用普通的 css 类设置这些组件的样式，所以暂时我发现 1.我们可以使用::ng-deep 代替样式：所以我确实使用了这个，但这不是这些组件样式的合法或正确方法

2.内联样式：这也不是在客户端项目中进行样式设置的好方法

那么，如果有人可以帮助解决这个问题，我们如何设计任何替代方法来做到这一点？

:host ::ng-deep .p-sidebar {
  width: 285px;
  background-color: #fafafa;
  height: 100vh;
  ::-webkit-scrollbar {
    display: none;
  }
}

Answer 1

For styling component with PrimeNg libraries , you should write all your styling classes in **style.css** file . If you write css class in style.css file then there is no need to write .ng-deep:: . So, you can simply move your css from component to style.css class as shown below:-

**style.css file:-**
.p-sidebar {
  width: 285px;
  background-color: #fafafa;
  height: 100vh;
  ::-webkit-scrollbar {
    display: none;
  }
}

Note:- However , if you want to use .ng-deep as the last solution then you can import ViewEncapsulation property of Angular . By including this property , the :host ::ng-deep .p-sidebar class will not affect other components.

in your ts file:-

import { ViewEncapsulation } from '@angular/core';
@component{
encapsulation: ViewEncapsulation.None
}