css - 如何设置使用 ngx-markdown 呈现的内容的样式？

Question

我正在使用 Angular 构建一个博客，我想使用 Markdown 创建我的帖子。我打算使用 ngx-markdown 来呈现它们。现在我正在创建一个“创建后”组件。问题是我想在 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 中起作用，您应该尝试将 css 代码块添加到 styles.css

.post-preview h1 {
  color: blue;
}