Angular 6使用Bulma CSS呈现没有Bulma样式的HTML元素

我刚刚安装了Angular 6，开发了一个新的应用程序，并添加了一个CSS框架

为了确保一切正常运行，我对我的

app.component.html

模板进行了一些快速更改，并运行了

ngserve

。这是HTML

<div class="card" style="margin: 0 auto;">
  <h1>My New App</h1>
  <h3>You have a lot of work to do</h3>
  <ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>
      <ol>
        <li>sub-item 1</li>
        <li>sub-item 2</li>
      </ol>
    </li>
  </ul>
</div>

---

好的，所以问题是Bulma本身。它使用HTML头标签做了一些奇怪的事情

您需要在

标记中包装

h1

等。像这样：

<div class="content">
  <div class="card" style="margin: 0 auto;">
    <h1>My New App</h1>
    <h3>You have a lot of work to do</h3>
    <ul>
      <li>item 1</li>
      <li>item 2</li>
      <li>
        <ol>
          <li>sub-item 1</li>
          <li>sub-item 2</li>
        </ol>
      </li>
    </ul>
  </div>
</div>

我的新应用
你有很多工作要做

项目1
项目2

分项目1
分项目2

进一步解释

---

也很有帮助。

您是否已将css添加到样式中。cssI尚未添加任何css。

h1

和

h3

应该默认为不同的大小。使用开发工具

h1

和

h3

元素的css是什么？在这种情况下，您应该找到

h1

，

h2

的默认css规则，并且必须有规则覆盖它们。或者可能出于任何原因，它们没有呈现为

h

。你是对的，使用开发工具，我可以看到

user-agent样式表

正在删除Bulma的默认

h1

和

h2

默认

size

和

font-weight

属性。你能指一下实时演示吗？

<div class="content">
  <div class="card" style="margin: 0 auto;">
    <h1>My New App</h1>
    <h3>You have a lot of work to do</h3>
    <ul>
      <li>item 1</li>
      <li>item 2</li>
      <li>
        <ol>
          <li>sub-item 1</li>
          <li>sub-item 2</li>
        </ol>
      </li>
    </ul>
  </div>
</div>