Storybook CSS Chaos 附加组件

一个在组件周围应用可继承 CSS 属性的附加组件，以便更好地测试会改变组件外观和感觉的上下文场景。通过这种方式进行测试，可以限制将组件添加到应用程序时样式泄漏。

之前

之后

使用脚本

运行 npm install css-chaos-addon

在你的 main.js 文件中，添加到 addons 数组

addons: ["css-chaos-addon"]

支持的 CSS 属性

此附加组件设置的可继承属性包括

• border-collapse
• border-spacing
• caption-side
• color
• cursor
• direction
• empty-cells
• font-family
• font-size
• font-style
• font-variant
• font-weight
• letter-spacing
• line-height
• list-style-position
• list-style-type
• text-align
• text-indent
• text-transform
• white-space
• word-spacing

有关这些属性的更多信息，请参阅属性文件 此处。

某些属性具有可能由使用应用程序设置的任意值（例如 color）。如果你想用你自己的值覆盖这些值，请参阅有关自定义 CSS 属性的部分。

自定义 CSS 属性

要进行自定义，你需要利用 Storybook 的参数功能，该功能可以在全局级别或故事级别设置。用于 CSS Chaos 附加组件的参数称为 cssPropertyData。

CSS 属性键包括

• name：将在附加组件下拉菜单上方设置的 css 属性的名称，并将用于在全局 css 中设置 css 属性值。
• description：将在附加组件面板中名称下方和下拉选项上方显示的 css 属性的描述。
• default：下拉菜单的默认值。当附加组件面板处于活动状态时，此值将自动应用于全局 css。
• values：用户可以选择用来操作视图的选项列表。随机化功能也将使用此列表来选择随机值。

如果你想添加一个 css 属性

parameters: {
    cssChaos: {
      propertyData:
        [
            {
                "name": "hello world",
                "description": "Lorem ipsum",
                "default": "world",
                "values": [
                    "hello",
                    "world"
                ]
            }
        ]
    }
};

如果你想更改一个 css 属性，更新对象中的一个或所有键（name、description、default、values）

parameters: {
    cssChaos: {
      propertyData:
        [
            {
                "name": "updated-name",
                "description": "An updated description goes here",
                "default": "new default",
                "values": [
                    "this",
                    "includes",
                    "updated",
                    "values",
                    "new default"
                ]
            }
        ]
    }
};

要从附加组件面板中删除现有的 css 属性下拉菜单，请从对象中删除所有值。

parameters: {
    cssChaos: {
      propertyData:
        [
            {
                "name": "color",
                "values": []
            }
        ]
    }
};

设置最大方差

如果你想限制点击“随机化！”按钮时的方差量，你可以设置一个名为 maxVariance 的值。如果你设置了最大方差，它将只随机化你设置的属性数量。如果你没有设置最大方差，它将默认随机化所有属性。

parameters: {
    cssChaos: {
        maxVariance: 5
    }
};

• 设置最大方差并不意味着将有那么多非默认值。每个属性都被设置为一个随机值，该值可能等于默认值。

关闭历史记录

如果你想隐藏历史记录下拉菜单，请将 cssChaos 对象下的 history 属性设置为 false。默认情况下，此属性将设置为 true。

parameters: {
    cssChaos: {
        history: false
    }
};

开发脚本

• npm start 在监视模式下运行 babel 并启动 Storybook
• npm run build 构建和打包你的附加组件代码