CSS Component not working when defined styleUrls in Angular

Dung Do Tien Oct 13 2020 24

I have created a component in angular 7, but when I define CSS style but it not accept & working with that CSS style. This is about my version project:

Angular CLI: 7.3.6
Node: 10.16.0
OS: win32 x64
Angular: 7.2.9
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.13.6
@angular-devkit/build-angular     0.13.8
@angular-devkit/build-optimizer   0.13.8
@angular-devkit/build-webpack     0.13.8
@angular-devkit/core              7.3.6
@angular-devkit/schematics        7.3.6
@angular/cdk                      7.3.3
@angular/cli                      7.3.6
@angular/material                 7.3.3
@ngtools/webpack                  7.3.8
@schematics/angular               7.3.6
@schematics/update                0.13.6
rxjs                              6.4.0
typescript                        3.2.4
webpack                           4.29.0

And this is my tag component:

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

}

And this is my CSS inside tag.component.css:

@media (min-width: 576px)
{
  .modal-dialog.modal-info {
      max-width: 700px !important;
  }
}

@media (min-width: 1024px)
{
  .modal-dialog.modal-info {
      max-width: 800px !important;
  }
}

@media (min-width: 1300px)
{
  .modal-dialog.modal-info {
      max-width: 900px !important;
  }
}

Thank you for any suggestions!!

Have 1 answer(s) found.
  • This error occurs when you’re declaring the styleUrls  attribute on the parent component and due to encapsulation they are not available in the child component. You have to move it to the tag component.

    If you want to keep it on the level you currently have you need to make the view encapsulation to none on the tag component. You can change tag component from :

     @Component({
      selector: 'app-tag',
      templateUrl: './tag.component.html',
      styleUrls: ['./tag.component.css']
    }) 

    To

     @Component({
      selector: 'app-tag',
      templateUrl: './tag.component.html',
      styleUrls: ['./tag.component.css'],
      encapsulation: ViewEncapsulation.None
    }) 

    I hope it resolved the issue for you.

    Manish Kumar Oct 13 2020
Leave An Answer
* NOTE: You need Login before leave an answer

* Type maximum 2000 characters.

* All comments have to wait approved before display.

* Please polite comment and respect questions and answers of others.

Popular Tips