Как переопределить styles.css с помощью component.css (Angular)

У меня есть общий набор .modal-content в стили.css. Это относится к каждой модальной панели в приложении. Я хотел бы переопределить его ширину в компонент.css. Этот компонент также имеет модальную панель, и даже если я добавлю следующее в компонент.css, модальное окно сохранит свою глобальную ширину.

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

Даже если я использую !important, это не имеет никакого эффекта.

Что я могу сделать, чтобы переопределить глобальное значение css?

РЕДАКТИРОВАТЬ

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