How to override styles.css with the component.css (Angular)

Question

I have a generic .modal-content set in styles.css. This applies to every modal panel in the application. I would like to override its width in the component.css. This component has also a modal panel, and even if I put the following into the component.css, the modal will retain its global width.

.modal-content{
  border-radius: 0;
  border:none;
  width: 25%;
}

Even if I use !important it does not have any effect.

What can I do to override the global css value?

EDIT

@Component({
  selector: 'app-base-data',
  templateUrl: './base-data.component.html',
  styleUrls: ['./base-data.component.css']
})
export class BaseDataComponent implements OnInit {

Could you also post your component html and ts? What view encapsulation strategy are you using? — GCSDC
– GCSDC, Commented Mar 20, 2019 at 17:00
you can set encapsulation: ViewEncapsulation.None in the component — Joel Joseph
– Joel Joseph, Commented Mar 20, 2019 at 17:03
Would advice that turning ViewEncapsulation off might cause more issues as well — IvanS95
– IvanS95, Commented Mar 20, 2019 at 17:07
@JoelJoseph it works. make it an answer. and I'll accept it. — Sanyifejű
– Sanyifejű, Commented Mar 20, 2019 at 17:10

Joel Joseph · Accepted Answer · 2019-03-20 17:22:42Z

9

To override global style rule on the component style file, add this on your component.ts

encapsulation: ViewEncapsulation.None

check out the official doc : https://angular.io/api/core/ViewEncapsulation

answered Mar 20, 2019 at 17:22

Joel Joseph

6,1974 gold badges34 silver badges37 bronze badges

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

2 Comments

Chriso Lopez Over a year ago

but this will leak the component.css to the rest of the application :(

Momin Over a year ago

I get the desired effect without leaking to other components using encapsulation: ViewEncapsulation.ShadowDom

Collectives™ on Stack Overflow

How to override styles.css with the component.css (Angular)

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related