Storybook 附加元件外框

Storybook 附加元件外框可用於在 Storybook 的預覽中視覺化偵錯 CSS 佈局和對齊。基於 Pesticide，它會在預覽窗格中的每個元素周圍繪製外框。

使用方式

需要 Storybook 6.1 或更高版本。外框是 essentials 的一部分，因此預設安裝在所有新的 Storybook 中。如果您需要將其添加到您的 Storybook，您可以執行

npm i -D @storybook/addon-outline

然後，將以下內容新增至 .storybook/main.js

export default {
  addons: ['@storybook/addon-outline'],
};

您現在可以點擊工具列中的外框按鈕或按下 o 鍵來切換外框。