Why CSS doesn't match with Angular 6 selector component?

Question

app.html

<app-chat></app-chat>

chat.html

<h1>Hello</h1>

chat.ts

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

@Component({
  selector: 'app-chat',
  templateUrl: './chat.component.html',
  styleUrls: ['./chat.component.css']
})
export class ChatComponent implements OnInit {
  constructor() { }

  ngOnInit() {
  }
}

chat.css

h1 {
    background-color: #000;
}

I need to know why the chat.css doesn't work in my browser. When I used CSS directly without chat component it works (like below).

app.html

<h1>Hello</h1>

app.css

h1 {
    background-color: #000;
}

So what is the solution?

Could you share with us a working example of your problem in a fiddle/snippet? Because as you said the css inside your "chat.css" file should working if load corectly on your component, without necessarly put the css code in an outer ".css" file. — Ray Soy
– Ray Soy, Commented Nov 30, 2018 at 12:01
stackblitz.com/edit/angular-zpfcrx This is how it usually works — mchl18
– mchl18, Commented Nov 30, 2018 at 12:04

Johnsackson · Accepted Answer · 2018-11-30 12:09:05Z

1

Try this!

::ng-deep h1{
   background-color: #000;
}

answered Nov 30, 2018 at 12:09

Johnsackson

4492 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

inconnu Over a year ago

in the chat.css ?

inconnu Over a year ago

can you explain me the ::ng-deep functionality !

Sakkeer A · Accepted Answer · 2018-11-30 12:06:21Z

1

Try !important in your chat.css file

h1{
   background-color: #000 !important;
}

or

Use the powerful weapon of CSS style.css. But, before using it you have to set the class name for h1 tag.

chat.html

<h1 class="exampleClassName">Helo<h1>

Next, in your style.css file

.exampleClassName{
     background-color: #000;
 }

edited Nov 30, 2018 at 12:06

answered Nov 30, 2018 at 11:52

Sakkeer A

1,1203 gold badges17 silver badges40 bronze badges

2 Comments

mchl18 Over a year ago

Advising to use !important is a very irresponsible thing to do :P

Sakkeer A Over a year ago

@inconnu I Updated my answer. Check it out

Keilla Fernandes · Accepted Answer · 2018-11-30 12:31:05Z

0

I did an example and it works: https://stackblitz.com/edit/angular-u99pry

answered Nov 30, 2018 at 12:31

Keilla Fernandes

1

Collectives™ on Stack Overflow

Why CSS doesn't match with Angular 6 selector component?

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related