Блог

Я создаю блог с помощью Angular и хочу создавать свои сообщения с помощью Markdown. Я намерен использовать ngx-markdown их для визуализации. Прямо сейчас я создаю компонент «post creation». Дело в том, что я хочу применить некоторый стиль к уценке, но не могу. Это мой компонент:

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

Я применил его для целей тестирования. Заголовок в верхней части страницы с надписью «Новое сообщение» получает стиль (синий), а уценка — нет. Я также пробовал использовать разные селекторы, такие как markdown h1 и .post-preview h1 , но ни один из них не работал. Почему это не работает и как я могу заставить это работать?

Как правило, изменения libray css работают, styles.css вам следует попытаться добавить свой блок кода css в styles.css

 .post-preview h1 {
  color: blue;
}