未样式化

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

¥The Unstyled block is a special block that disables Storybook's default styling in MDX docs wherever it is added.

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

¥By default, most elements (like h1, p, etc.) in docs have a few default styles applied to ensure the docs look good. However, sometimes you might want some of your content to not have these styles applied. In those cases, wrap the content with the Unstyled block to remove the default styles.

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>

结果：

¥Yields:

Screenshot of Unstyled Doc Block

其他块（如 Story 和 Canvas）已经没有样式，因此无需将它们封装在 Unstyled 块中，以确保 Storybook 的样式不会渗透到故事中。但是，如果你直接在 MDX 中导入组件，则很可能希望将它们封装在 Unstyled 块中。

¥The other blocks like Story and Canvas are already unstyled, so there’s no need to wrap those in the Unstyled block to ensure that Storybook’s styles don’t bleed into the stories. However, if you import your components directly in the MDX, you most likely want to wrap them in the Unstyled block.

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

¥Due to how CSS inheritance works it’s best to always add the Unstyled block to the root of your MDX, and not nested into other elements. The following example will cause some Storybook styles like color to be inherited into CustomComponent because they are applied to the root div:

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

未样式化

¥Unstyled

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

Unstyled 配置了以下属性：

¥Unstyled is configured with the following props:

`children`

类型：React.ReactNode

¥Type: React.ReactNode

提供你不想应用默认文档样式的内容。

¥Provides the content to which you do not want to apply default docs styles.