Style rule working only in the styles.css and not the component css

Question

I'm working on an Angular 12 project with PrimeNG. I have a component on which I want to apply a rule, for exemple:

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

Of course I only want to apply this rule to my component and not to every component, but when I put it in the component css, which is specified in the component.ts (cf bellow), it's not applying whereas if I put it in the styles.css it does apply. Why is that?

It looks like this problem only occurs with classes provided by PrimeNG.

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

A bit more details:

• I can see the rule in the head of the html in a style div, which does list the content of the 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}

• I do not see it in the list of rules when I select the.p-dropdown-panel div with the dev tools, only list the following rules:

  .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%); }

I do import the dropdown module inside my component:

import { DropdownModule } from 'primeng/dropdown';

Answer 1

I am not familiar with PrimeNG however I would guess that this class is applied to one of their element inside their components.

And that's exactly the problem. Component-Styles are usually only applied inside that component. That means neither parent nor child components are (generally) affected by any styles inside them. That's called View encapsulation

You can do it by using the::ng-deep pseudo-class however that is usually considered bad practice and deprecated. For more info see here

Answer 2

As @berse2212 said, this is an issue with view encapsulation. PrimeNG seems to answer this problem on this page of the documentation, under Local Theming:

https://www.primefaces.org/primeng-v12-lts/#/theming:~:text=lg%22%20/%3E-,Local%20Styling,-Theming%20styles%20the

I don't see::ng-deep working on my end, so adding encapsulation: ViewEncapsulation.None to the @Component is what I'll do