如何在nextJs中设置MarkDown内容的样式？

Question

我正在使用markdown -它可以消化标记并将html发回，这很好，但是我对样式有一个问题，下面是我在Nextjs项目上的代码：

         <h1 className="text-3xl mb-3 leading-snug display-6" 
          > {currentPost.title}</h1>

          <article style={{
            fontFamily: "Helvetica,Arial,sans-serif",
            color: "#666",
            fontSize:"16px"
          }} 
          dangerouslySetInnerHTML={{ __html: md.render(currentPost.content) }} 
          />

在我的文章中，我有由h2、h3、ul、li和我组成的数据，特别是(在

显然，我无法在Nextjs中创建样式，而且对CSS的了解有限，使我无法了解如何针对这些元素进行样式设计。

任何帮助都很感激！谢谢

Answer 1

1. 将id或className属性添加到<article>元素。

下面是id="htmlContent"的一个示例。

<article 
   id="htmlContent"
   dangerouslySetInnerHTML={{ __html: md.render(currentPost.content) }} 
/>

1. 使用检查器developer tools中的Elements选项卡查看嵌套在<article #htmlContent>元素中的html元素是如何构造的。

​

​

1. 在styles/global.css中，一般情况下，可以使用id或class选择器添加样式。对于您的情况，将样式添加到由语法嵌套在#htmlContent选择器内的html元素中，以便根据步骤2中看到的结构，将嵌套在#htmlContent元素中的元素样式化。

下面是一个使用id选择器的示例。

#htmlContent > h2 {
  color: blue;
  font-size: 28px;
}

#htmlContent > p > a {
  color: red;
  text-decoration: none;
}

下面是一个例子，它实现了将h4和h5标题样式设置为蓝色和紫色标注的方法。

​

​

祝您好运，记住这需要一些尝试和错误，但是一旦您习惯了css语法并使用了检查器中的元素选项卡，您就可以做一些很酷的事情了。