如何强制 Astro 在组件内使用作用域类来渲染我的 markdown？

Question

我有一个 Astro 组件，在其中将 markdown 渲染为 html（使用

@astropub/md

），然后尝试在组件内使用作用域 CSS 来定位渲染的 markdown。

但是，CSS 作用域需要

@astropub/md

未渲染的类。

例如：

---
import { markdown } from "@astropub/md";
---

<p>this text is not bold, <strong>but this is</strong>.</p>
{markdown("this text is not bold, **but this is**.")}
<style>
   strong {
      color: red;
   }
</style>

这将有效地呈现如下：

<style type="text/css">
  strong:where(.astro-UW5KDBXL){
    color:red
  }
</style>
<p class="astro-UW5KDBXL">
  this text is not bold, <strong class="astro-UW5KDBXL">but this is</strong>.
</p>
<p>
  this text is not bold, <strong>but this is</strong>.
</p>

从 markdown 渲染的示例缺少作用域

style

定义用于为文本着色的类。

我已将 markdown 包添加到我的 astro.config.mjs 集成中，但这似乎并没有改变它呈现 markdown 的方式。

我可以使用

<style is:inline

或

<style is:global>

，但这样我就失去了范围性质，我觉得这会破坏Astro“岛”结构的优势之一。

那么我如何强制

astropub/md

渲染作用域类？

Answer 1

您可以使用

:global

CSS 选择器将样式应用到该组件的子元素。

---
import { markdown } from "@astropub/md";
---

<p>this text is not bold, <strong>but this is</strong>.</p>
{markdown("this text is not bold, **but this is**.")}
<style>
   :global(strong) {
      color: red;
   }
</style>

• 有关 Astro 中全局样式的更多信息

• :global

  有什么作用？ - 所以答案