Css changed after inputting router-outlet - html

Question

I was developing a login screen within angular with the within the app.component.html as such:
app.component.ts
<div class="container">
<app-login></app-login>
</div>
and css as such:
login.css
.form-group {
display: block;
margin-bottom: 15px;
}
.form-group label {
display: block;
margin: 0 0 5px 0;
}
app.component.css
.container {
display: grid;
height: 100%;
}
app-login {
width: 100%;
max-width: 274px;
place-self: center;
}
However, since I have now incorporated routing into my app, I display the login page using the <router-outlet> component, but this has ruined the CSS of the login page is it once was...
app.component.ts
<div class="container">
<router-outlet></router-outlet>
</div>
How can I change my CSS files such that I can get back the look I once had?
Here is a stackblitz to my example
Update
Solution found to the missing CSS (see below)
However now it appears is hogging much of the screen, pushing my element downward?

Answer 1

You need to set
encapsulation: ViewEncapsulation.None
on the AppComponent to allow styles to affect also those components which are used inside AppComponent.
import { Component, ViewEncapsulation } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
name = 'Angular';
}
But it will be better to use styles on those components for which they were declared.
This is a working Stackblitz.

Answer 2

You were targeting <app-login> in the app.component.css file and styling it to have a fixed width and align it center. What you have to remember is that, Angular enforces emulated view encapsulation and also when you are using router, <app-login> may be changed to some random dynamic name at run time thereby making your css classes that you might have written in app.component.css ineffective.
Its always a best practice to write styles for a component in its respective CSS file rather than the root components css file.
Here is a changed Stackblitz
Here is the result: