Question

我找到了一个codepen，它是一个登录页面。我想将其放在我的角度应用程序中，但无法设置背景样式。我的背景是空的。

这是我在我的角度应用程序中添加的内容： 1. html文件

<div class="login">
  <h1>Login</h1>
  <form method="post">
    <input type="text" name="u" placeholder="Username" required="required"/>
    <input type="password" name="p" placeholder="Password" required="required"/>
    <button type="submit" class="btn btn-primary btn-block btn-large">Let me in.</button>
  </form>
</div>

然后，我将相应的css文件放在代码笔中，放到我的角度应用程序中的.scss文件中。

您可以在codepen内查找更多代码，我只是将复制粘贴粘贴到我的angular应用程序中，下面是我的.ts文件（用于组件）：

import { Component, OnInit } from '@angular/core';

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

  constructor() { }

  ngOnInit() {
  }

}

所以，我的问题是：如何为角度组件的“主体”设置样式？（我想将此组件用作整个页面）

Answer 1

您可以将CSS放入相应的login.component.scss文件中。

Answer 2

来自Documentation：

您可以使用:host伪类选择器来定位样式。 托管组件的元素（与在组件模板中定位元素相反）。

因此，在您的login.component.scss文件中：

:host{
  background-color: cyan;
}

如果您确实要在应用程序主体中添加CSS，则可以在项目根目录的styles.css文件中进行操作。

Answer 3

在您的CSS文件中，使用：host

:host {
    background-color: red;
    display: block;
}

Answer 4

如果在应用程序的根目录中有styles.css或styles.scss样式表，则可以在其中为正文添加样式，如下所示：

body {
    background-color: black;
}

但是，这将更改整个应用程序的背景色。如果只想更改登录组件的背景色，请在 login.component.scss 样式表中添加background-color样式。

如何设置组件的“主体”的样式为角形？

4 个答案: