title: How to override styles.css with the component.css (Angular)
body: <p>I have a generic <code>.modal-content</code> set in <strong>styles.css</strong>. This applies to every modal panel in the application.
  I would like to override its  width in the <strong>component.css</strong>. This component has also a modal panel, and even if I put the following into the <strong>component.css</strong>, the modal will retain its global width.</p>
  
  <pre><code>.modal-content{
    border-radius: 0;
    border:none;
    width: 25%;
  }
  </code></pre>
  
  <p>Even if I use <code>!important</code> it does not have any effect.</p>
  
  <p>What can I do to override the global css value?</p>
  
  <p><strong>EDIT</strong></p>
  
  <pre><code>@Component({
    selector: 'app-base-data',
    templateUrl: './base-data.component.html',
    styleUrls: ['./base-data.component.css']
  })
  export class BaseDataComponent implements OnInit {
  </code></pre>