Как задать стиль для "тела" компонента в angular?
Я нашел кодовый ключ, это страница входа в систему. Я хочу поместить его в свое приложение 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>
Затем я помещаю соответствующий файл css в код моего файла .scss в моем приложении angular.
Вы можете заглянуть внутрь 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() {
}
}
Итак, мой вопрос: как установить стиль для "тела" углового компонента? (Я хочу использовать этот компонент как целую страницу)
Ответы 4
вы можете поместить CSS в соответствующий файл login.component.scss.
Можете ли вы попробовать поместить простое свойство CSS в файл ./login.component.scss и посмотреть, отразится ли оно? Просто первый шаг, чтобы проверить, читается ли ваша таблица стилей.
Я уверен, что файл таблицы стилей .scss читается, потому что моя кнопка отправки имеет стиль.
Круто! означает, что нужно правильно читать только CSS. Вы можете попробовать предложение Маарти или просто убедиться, что имеющийся у вас CSS подходит для вашего соответствующего SCSS. Кроме того, вы можете попробовать использовать общие стили, такие как @import url (fonts.googleapis.com/css?family=Open+Sans); в вашем глобальном файле styles.css
От Документация:
You can use the
:hostpseudo-class selector to target styles in the element that hosts the component (as opposed to targeting elements inside the component's template).
Итак, в вашем файле login.component.scss:
:host{
background-color: cyan;
}
Если вы действительно хотите добавить CSS в тело вашего приложения, вы можете сделать это в файле styles.css в корне вашего проекта.
В вашем файле css используйте: host
:host {
background-color: red;
display: block;
}
Если у вас есть таблица стилей styles.css или styles.scss в корне вашего приложения, вы можете добавить туда стиль для тела следующим образом:
body {
background-color: black;
}
Однако это изменит цвет фона для всего приложения. Если вы хотите изменить только цвет фона компонента входа в систему, добавьте стиль background-color в таблицу стилей login.component.scss.
Я просто хочу, чтобы стиль фона влиял на мою страницу входа, затем я попытался поместить «background-color: yellow» на верхний уровень моего файла «login.component.scss», тогда webstorm не доволен этим.
В консоли регистрируется ошибка? Попробуйте ".login {background-color: yellow;}".
Нет ошибки с консоли, и ".login {background-color: yellow;}" работает, но работает только для небольшой области вокруг области входа в систему, а не для всей страницы.
Потрясающие! Итак, теперь вам нужно добавить больше стиля к классу ".login {}" в вашей таблице стилей, чтобы компонент входа в систему занимал всю высоту страницы. Элемент div занимает достаточно высоты, чтобы показать все, что в нем вложено, поэтому он не занимает всю страницу.
Это именно то, что я сделал.