首页 文章

如何设置角度的组件“body”的样式？

提问于
浏览 次
0

我找到了一个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中查看更多代码，我只是对我的角度应用程序进行了复制粘贴，以下是我的.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

4 回答

  • 0

    来自Documentation：

    您可以使用：host伪类选择器来定位承载组件的元素中的样式（而不是在组件模板中定位元素） .

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

    :host{
  background-color: cyan;
}

    如果您确实要将css添加到应用程序正文中，可以在项目根目录的 styles.css 文件中执行此操作 .

    回复于
  • 0

    在你的css文件中使用：host

    :host {
    background-color: red;
    display: block;
}
    回复于
  • 0

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

    回复于
  • 0

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

    body {
    background-color: black;
}

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

    回复于

相关问题