无样式

Unstyled 块是一个特殊的块，它在 MDX 文档中禁用 Storybook 的默认样式，无论它添加到哪里。

默认情况下，文档中的大多数元素（如 h1、p 等）都应用了一些默认样式，以确保文档看起来美观。但是，有时您可能希望某些内容不应用这些样式。在这些情况下，请使用 Unstyled 块包裹内容以删除默认样式。

ButtonDocs.mdx

import { Meta, Unstyled } from "@storybook/blocks";
import { Header } from "./Header.tsx";
 
<Meta title="Unstyled" />
 
> This block quote will be styled
 
... and so will this paragraph.
 
<Unstyled>
  > This block quote will not be styled
 
  ... neither will this paragraph, nor the following component (which contains an \<h1\>):
 
  <Header />
 
</Unstyled>

产生

Screenshot of Unstyled Doc Block

其他块（如 Story 和 Canvas）已经没有样式，因此无需将它们包裹在 Unstyled 块中，以确保 Storybook 的样式不会影响到 stories。但是，如果您直接在 MDX 中导入组件，则很可能需要将它们包裹在 Unstyled 块中。

由于 CSS 继承的工作方式，最好始终将 Unstyled 块添加到 MDX 的根目录，而不是嵌套到其他元素中。以下示例将导致一些 Storybook 样式（如 color）被继承到 CustomComponent 中，因为它们应用于根 div

<div>
  <Unstyled>
    <CustomComponent/>
  </Unstyled>
</div>

无样式

import { Unstyled } from '@storybook/blocks';

Unstyled 通过以下 props 配置

`children`

类型: React.ReactNode

提供您不希望应用默认文档样式的内容。