Как стилизовать html и body из основного углового компонента? - PullRequest
Новая
       1

Как стилизовать html и body из основного углового компонента?

0 голосов
/ 13 декабря 2018

Я пытаюсь стилизовать html и body из основного компонента:

app.component.styl: 

 html, body {
       padding: 0;
       margin: 0;
       background: blue;
    }

и кажется, что он не работает сМой угловой компонент:

app.component.ts: 

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

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.styl']
    })
    export class AppComponent {

    }

app.component.html: 

<div class="todo-app">
  <div>
    <input type="text">
    <button>Add</button>
  </div>
</div>

Почему html и body selector не работают, есть ли специальный угловой метод для достижения этого ??

Ответы [ 3 ]

0 голосов
/ 13 декабря 2018

Если вам нужно, чтобы стиль применялся ко всем проектам, вам нужно деактивировать Encapsulation в css, 

@Component({
   ...
   encapsulation: ViewEncapsulation.None
   ...
})

Здесь хорошая статья об этом.Но я рекомендую вам установить стиль в style.css или style.scss в корне вашего проекта.

0 голосов
/ 13 декабря 2018

Если вы включили препроцессор Stylus в своем проекте, у вас есть два способа ЗАДАТЬ применить ваш Styles к корневому файлу.

1-Throughваш общий styles.styl файл

2 - через сам файл index.html

0 голосов
/ 13 декабря 2018

app.component расположен внутри тега тела index.html;как это

index.html 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angular Alerts</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="assets/img/favicon/favicon.ico">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <app-root></app-root> <!-- This is your App Component -->
</body>
</html>

Учитывая это, вы не можете настроить таргетинг на body или html с поведением по умолчанию (это означает, что если ViewEncapsulationвключен), поскольку стили ограничены только этим компонентом, а сам компонент НЕ имеет тег body;вам нужно определить стили в глобальном файле styles.css или отключить ViewEncapsulation для этого компонента, чтобы стили, определенные в его файле css, применялись глобально

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...