组件 – QF.EDU

Docs

组件

使用 MDX 在 Markdown 中使用 React 组件。

以下组件开箱即可在 Markdown 中使用。

如果您想构建和添加自己的自定义组件，请参阅下面的自定义组件部分。

内置组件

1. 呼出

<Callout type="default | warning | danger | note | info | success">
  这是默认的呼出。您可以在 "呼出 "中嵌入**Markdown**。
</Callout>

这是默认的呼出。您可以在 "呼出 "中嵌入Markdown。

这是一个警告呼出。它使用道具 type="warning"。

这是一个危险呼出。它使用道具 type="danger"。

这是一个警告呼出。它使用道具 type="note"。

这是一个危险呼出。它使用道具 type="info"。

这是一个警告呼出。它使用道具 type="success"。

2. 卡片

<Card href="#">
 
#### 标题
 
您可以在卡片内使用**标记**。
 
</Card>

标题

您可以在卡片内使用标记。

您还可以使用 HTML 在网格中嵌入卡片。

<div className="grid grid-cols-2 gap-4">
  <Card href="#">
    #### 一号卡
    您可以在卡片内使用**标记**。
  </Card>
 
  <Card href="#">
    #### 卡片二
    您还可以使用 "内联代码 "和代码块。
  </Card>
</div>

一号卡

您可以在卡片内使用标记。

卡片二

您还可以使用 "内联代码 "和代码块。

定制组件

您可以使用 useMDXComponent 中的 components props 添加自己的自定义组件。

components/mdx.tsx

import { Callout } from "@/components/callout"
import { CustomComponent } from "@/components/custom"
 
const components = {
  Callout,
  CustomComponent,
}
 
export function Mdx({ code }) {
  const Component = useMDXComponent(code)
 
  return (
    <div className="mdx">
      <Component components={components} />
    </div>
  )
}

一旦添加了自定义组件，就可以在 MDX 中按如下方式使用它：

<CustomComponent propName="value" />

HTML 元素

您可以使用上述相同的技术覆盖 HTML 元素。

const components = {
  Callout,
  CustomComponent,
  hr: ({ ...props }) => <hr className="my-4 border-slate-200 md:my-6" />,
}

This will overwrite the <hr /> tag or --- in Mardown with the HTML output above.

造型设计

Tailwind CSS 类可在 MDX 中用于样式设计。

<p className="text-red-600">This text will be red.</p>

确保您已在tailwind.config.js文件中配置了内容的路径：

电报机器人配置文件