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 {

Answer 1

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