How to style content rendered with ngx-markdown? - css

Question

I'm building a blog with Angular and I want to create my posts with Markdown. I intend to use ngx-markdown to render them. Right now I'm creating a "post creation" component. The thing is I wish to apply some styling on the markdown, but I can't. This is my component:
<div class="header-container">
<h1 class="header">New post</h1>
<button>Send</button>
</div>
<div class="main-container">
<div class="post-editor">
<label for="title">Title:</label>
<input class="title-field" type="text" name="title"
placeholder="E.g: Introduction to Programming" autocomplete="off"
[(ngModel)]="post.title"
>
<textarea [(ngModel)]="post.content"></textarea>
</div>
<div class="post-preview">
<markdown class="markdown" [data]="getPostAsString()" ngPreserveWhitespaces>
</markdown>
</div>
</div>
import { Component, OnInit } from '#angular/core';
interface Post {
title: string;
content: string;
}
#Component({
selector: 'app-create-post',
templateUrl: './create-post.component.html',
styleUrls: ['./create-post.component.css']
})
export class CreatePostComponent implements OnInit {
post: Post = {
title: 'Introduction to Programming',
content: 'Lorem ipsum dolor, sit amet...'
};
constructor() {
}
ngOnInit(): void {
}
getPostAsString(): string {
return `# ${this.post.title}\n` + this.post.content;
}
}
h1 {
margin-top: 20px;
color: blue;
}
label {
font-size: 18px;
}
input, textarea {
width: 100%;
}
input {
height: 25px;
}
textarea {
height: 300px;
}
button {
margin-left: auto;
height: 75%;
align-self: center;
font-size: 18px;
padding: 5px 10px;
}
.header-container, .main-container {
display: flex;
}
.post-editor, .post-preview {
flex: 1;
}
.post-preview {
padding-top: 20px;
}
.post-editor {
margin-right: 40px;
}
.header {
margin-bottom: 25px;
}
.title-field {
display: block;
margin-top: 5px;
margin-bottom: 20px;
}
Note this rule:
h1 {
color: blue;
}
I applied it for test purposes. The header on top of the page that says "New Post" gets styled (blue), but the markdown one does not. I also tried using different selectors such as markdown h1 and .post-preview h1, but none worked. Why it isn't working and how can I make it work?

Answer 1

Generally libray css changes is working in styles.css you should try to add you css code block to styles.css
.post-preview h1 {
color: blue;
}

Answer 2

If you are using Angular you can apply the styles when you use ::ng-deep:
.post-preview ::ng-deep h1 {
color: blue;
}