無樣式

Unstyled 區塊是一個特殊的區塊，可停用 MDX 文件中任何加入位置的 Storybook 預設樣式。

預設情況下，文件中的大多數元素（例如 h1、p 等）都會套用一些預設樣式，以確保文件看起來美觀。不過，有時您可能希望某些內容不套用這些樣式。在這些情況下，請使用 Unstyled 區塊包裝內容，以移除預設樣式。

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 的樣式不會影響到 Story。不過，如果您直接在 MDX 中匯入元件，則很可能想要將它們包裝在 Unstyled 區塊中。

由於 CSS 繼承的運作方式，最好始終將 Unstyled 區塊新增至 MDX 的根目錄，而不是巢狀於其他元素中。以下範例會導致某些 Storybook 樣式（例如 color）繼承到 CustomComponent 中，因為這些樣式會套用至根 div

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

無樣式

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

Unstyled 使用以下屬性設定

`children`

類型：React.ReactNode

提供您不想套用預設文件樣式的內容。