CSS Component not working when defined styleUrls in Angular
Dung Do Tien
Oct 13 2020
453
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.
-
M4
Manish Kumar Oct 13 2020
This error occurs when you’re declaring the
styleUrlsattribute 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.
* Type maximum 2000 characters.
* All comments have to wait approved before display.
* Please polite comment and respect questions and answers of others.