Decorators

Wrapping components in fixtures can become repetitive. Decorators can be used to apply context providers (or any other wrapper) to a subset of fixtures.

A cosmos.decorator file looks like this:

export default ({ children }) => <Provider store={store}>{children}</Provider>;

The rules for decorators are:

• A decorator must be placed in a file named cosmos.decorator.{jsx,tsx}.
• A decorator must be a default export.
• A decorator is a React component that receives a children prop.
• A decorator only applies to fixture files contained in the decorator's directory.
• Decorators can be composed, in the order of their position in the file system hierarchy (from outer to inner).

A decorator file can also export an array of decorators:

export default [Decorator1, Decorator2, Decorator3];

Importing Global CSS

For styles that need to be applied globally—such as normalize.css, global variables, or other design system styles—it is recommended not to import them inside a decorator. Importing CSS files in a decorator may result in their styles being appended after your fixture styles, which can lead to unexpected styling issues.

Instead, add these CSS files to the globalImports array in your cosmos.config.json. For example:

{
  "plugins": ["…"],
  "globalImports": [
    "normalize.css",
    "./src/design-system/global-variables.css",
    "./src/design-system/global.css"
  ]
}

This ensures that your global CSS is loaded before any fixture-specific styles, maintaining the intended cascade.