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 鍵來切換外框。