如何以角度为组件的“主体”设置样式？答案

【问题标题】：How to set style for "body" of a component in angular?如何以角度为组件的“主体”设置样式？
【发布时间】：2018-10-23 14:46:58
【问题描述】：

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

这是我在 Angular 应用程序中添加的内容： 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>

然后我将codepen中对应的css文件放到我的angular应用中的.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() {
  }

}

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

【问题讨论】：

标签： angular sass

【解决方案1】：

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

【讨论】：

这正是我所做的。
你可以尝试将简单的 CSS 属性放在 ./login.component.scss 文件中，看看它是否得到反映？只需第一步验证您的样式表是否正在被读取。
我确信 .scss 样式表文件正在被读取，因为我的提交按钮有样式。
酷！意味着只需要正确读取 CSS。您可以尝试 Maarti 的建议，或者只是确保您拥有的任何 CSS 都适合您相应的 SCSS。此外，您可以尝试提取常见样式，例如 @import url(fonts.googleapis.com/css?family=Open+Sans);在你的全局 styles.css 文件中

【解决方案2】：

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

body {
    background-color: black;
}

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

【讨论】：

我只是想让背景样式影响我的登录页面，然后我尝试将“背景颜色：黄色”放在“login.component.scss”文件的顶层，然后 webstorm 是对此不满意。
它是否在控制台中记录错误？试试“.login { background-color: yellow; }”。
控制台没有错误，并且“.login { background-color: yellow; }”确实有效，但它只适用于登录区域周围的小区域，而不是整个页面。跨度>
太棒了！因此，现在您需要在样式表中为“.login {}”类添加更多样式，以使登录组件占据页面的整个高度。 div 元素只占据足够的高度来显示其中嵌套的任何内容，因此它不会占据整个页面。

【解决方案3】：

来自Documentation：

您可以使用:host 伪类选择器来定位 承载组件的元素（与定位组件模板内的元素相反）。

所以在你的login.component.scss 文件中：

:host{
  background-color: cyan;
}

如果您真的想将 css 添加到应用程序的主体中，可以在项目根目录下的 styles.css 文件中进行。

【讨论】：

【解决方案4】：

在你的 css 文件中使用 :host

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

【讨论】：