Angular 12中PrimeNG组件样式仅全局CSS生效，组件内CSS失效求助

我正在开发基于Angular 12和PrimeNG的项目，需要为指定组件单独设置样式规则，示例如下：

.p-dropdown-panel {
  width:515px;
}

我仅希望该规则作用于当前组件而非全局，但将其放入组件关联的test.component.css（已在组件.ts中配置）时不生效，放入全局styles.css时则正常生效。该问题仅出现在PrimeNG提供的类上。

组件配置代码如下：

@Component({
  selector: 'test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})

补充细节：

• 在HTML头部的style标签中可看到test.component.css的内容，包含该样式规则：

  .btn_left[_ngcontent-njo-c121]{float:left}.btn_right[_ngcontent-njo-c121]{float:right}.p-dropdown-panel[_ngcontent-njo-c121]{width:515px}
  

• 使用开发者工具选中.p-dropdown-panel元素时，未看到该自定义规则，仅显示PrimeNG默认样式：

  .p-dropdown-panel {
  position: absolute;
  top: 0;
  left: 0;
  }
  .p-dropdown-panel {
  background: #fff;
  color: #333;
  border: 1px solid #c8c8c8;
  border-radius: 3px;
  box-shadow: 0 3px 6px 0 rgb(0 0 0 / 16%);
  }
  

• 已在组件中导入DropdownModule：

  import { DropdownModule } from 'primeng/dropdown';
  

内容的提问来源于stack exchange，提问作者Matthieu Durand