Unstyled

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

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

ButtonDocs.mdx

import { Meta, Unstyled } from "@storybook/addon-docs/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>

Unstyled

import { Unstyled } from '@storybook/addon-docs/blocks';

Unstyled 使用以下 props 进行配置

`children`

类型：React.ReactNode

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