输入路由器出口后更改CSS

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: