Configuring defaults for imported variants

There are cases where you will want to have defaults applied to all variants, for example if you need a custom :selector for all your stories.

This can be set up in the configuration screen associated to your Storybook, which can be accessed from the main screen:

Location of the global configuration screen

You’ll see the following empty configuration out-of-the-box:

Configuration screen example

In this JSON configuration, defaultImportConfiguration is the field that configures the default options for imported variants. It follows the same configuration as the variantPropertiesAPI.

Here is a very simple example that covers two use cases:

  • Import all your stories with a custom :selector

  • Create an additional variant theme for all imported components, which will import two different stylesheets present in your Storybook

{
  "defaultImportConfiguration": {
    "initArgs": {
      ":selector": ".my-provider-class :first-child"
    },
      "variantProperties": [
    {
      "fromArg": ":css",
      "name": "theme",
      "values": [
        {"name": "dark", "argValue": "<link rel="stylesheet" href="/css/dark.css">"},
        {"name": "light", "argValue": "<link rel="stylesheet" href="/css/light.css">"}
      ]
    }
  ]
  }
}

See variantProperties API for more details.