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';

berse2212 · Accepted Answer · 2023-01-10 14:14:42Z

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

edited Jan 10, 2023 at 14:14

answered Jan 10, 2023 at 14:09

berse2212

9453 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Matthieu Durand Over a year ago

This is indeed an issue with view encapsulation, thanks.

Matthieu Durand · Accepted Answer · 2023-01-10 14:39:29Z

0

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

answered Jan 10, 2023 at 14:39

Matthieu Durand

1271 gold badge2 silver badges10 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related