如何样式化使用ngx-markdown呈现的内容？

Question

我正在用Angular建立一个博客，我想用Markdown创建我的帖子。我打算使用ngx-markdown来呈现它们。现在我正在创建一个"post创建“组件。问题是我希望在markdown上应用一些样式，但是我做不到。这是我的组件：

<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;
}

请注意以下规则：

h1 {
  color: blue;
}

我将其应用于测试目的。页面顶部标明"New Post“的页眉被设置了样式(蓝色)，但markdown页眉却没有。我还尝试使用不同的选择器，如markdown h1和.post-preview h1，但都不起作用。为什么它不工作，我怎样才能使它工作？

Answer 1

通常，libray css更改在styles.css中有效，您应该尝试在styles.css中添加您的css代码块

.post-preview h1 {
  color: blue;
}