使用组件

组件可以让你轻松地、一致地重用一部分用户界面（UI）或样式。例如链接卡片或 YouTube 嵌入。Starlight 支持在 MDX 和 Markdoc 文件中使用组件，并为你提供了一些常用组件。

在 Astro 文档中了解更多关于构建组件的信息.

在 MDX 中使用组件

你可以通过将组件导入到你的 MDX 文件中，然后将其作为 JSX 标签来渲染。它们看起来像 HTML 标签，但以大写字母开头，与你的 import 语句中的名称相匹配

src/content/docs/example.mdx

---
title: Welcome to my docs
---

import { Icon } from '@astrojs/starlight/components';
import CustomCard from '../../components/CustomCard.astro';

<Icon name="open-book" />

<CustomCard>Components can also contain **nested content**.</CustomCard>

因为 Starlight 由 Astro 驱动，所以你可以在你的 MDX 文件中添加对任何支持的 UI 框架（React、Preact、Svelte、Vue、Solid 和 Alpine）构建的组件的支持。在 Astro 文档中了解更多关于在 MDX 中使用组件的信息。

在 Markdoc 中使用组件

请按照我们的Markdoc 设置指南来添加对在 Markdoc 中编写内容的支持。

使用 Starlight Markdoc 预设，你可以通过 Markdoc 的 {% %} 标签语法来使用 Starlight 的内置组件。与 MDX 不同，Markdoc 中的组件不需要导入。下面的例子在 Markdoc 文件中渲染了 Starlight 的卡片组件

src/content/docs/example.mdoc

---
title: Welcome to my docs
---

{% card title="Stars" icon="star" %}
Sirius, Vega, Betelgeuse
{% /card %}

有关如何在 Markdoc 文件中使用组件的更多信息，请参阅 Astro Markdoc 集成文档。

内置组件

Starlight 为常见的文档使用场景提供了一些内置组件。在 MDX 文件中，这些组件可以从 @astrojs/starlight/components 包中获取；在 Markdoc 文件中，可以从Starlight Markdoc 预设中获取。

请参阅侧边栏以获取可用组件列表及其使用方法。

与 Starlight 样式的兼容性

Starlight 会为你的 Markdown 内容应用默认样式，例如在元素之间添加外边距。如果这些样式与你的组件外观冲突，请在你的组件上设置 not-content class 来禁用它们。

src/components/Example.astro

<div class="not-content">
  <p>Not impacted by Starlight’s default content styling.</p>
</div>

组件属性

使用来自 astro/types 的ComponentProps类型来引用组件接受的 Props，即使它们没有被组件本身导出。这在包装或扩展现有组件时很有用。

以下示例使用 ComponentProps 来获取 Starlight 内置 Badge 组件所接受的 props 类型。

src/components/Example.astro

---
import type { ComponentProps } from 'astro/types';
import { Badge } from '@astrojs/starlight/components';

type BadgeProps = ComponentProps<typeof Badge>;
---