Storybook 附加组件 CSS 自定义属性

此附加组件允许您自定义项目的 CSS 属性。

**一个 Vue3 友好的附加组件**：使用此附加组件后，您将不会遇到任何与@types/react相关的问题 =)

它将自动从我们的项目中获取所有 CSS 自定义属性，根据CSS.support 浏览器原生方法的响应在color 和text 之间进行转换，并在自定义面板中显示，您可以在其中轻松修改它。

安装

在您的终端中运行它

npm install -D @bissolli/storybook-css-properties

然后，将以下内容添加到.storybook/main.js中

module.exports = {
  addons: ['@bissolli/storybook-css-properties'],
};

完成，附加组件将识别组件中所有可用的 CSS 自定义属性，并使其在 CSS 属性面板中可供编辑。

自定义

附加组件将为您完成所有工作，但如果出于某种原因您需要自己进行自定义，我们有一些技巧可供您使用。

通过preview.{ts|js} 文件，您可以简单地使用附加组件参数来获得所需的输出。

示例

export const parameters: Parameters = {
  cssCustomProperties: {
    // list here all the props you would like to customize manually
    // this will deepmerge and override any setup that was automatically done
    // by the addon
    props: {
      // prop name
      '--font-size': {
        // description to be shown in the table
        description: 'This property is the only one coming from the `Text` component',
        // if you want to group items, use this props
        // this has a higher weight than the following `matchCategory`
        category: 'Button properties'
      },
    },
    // props listed here won't be visible in the panel to be customized
    hiddenProps: [
      '--color-white',
    ],
    // to make your life easier when grouping props
    // you can use regex to match props name and add under a section in the table
    // the key is the name of the section
    matchCategory: {
      color: /color/,
      typograph: /font/,
      space: /(space|padding|margin|line-height)/
    }
  }
};

上面的示例将输出以下面板