I am building storybook and have following problem. I want to set layout centered in preview. I tried

export const parameters = {
  layout: 'centered',
};

in the .storybook/preview.js But this sets layout centered for all components. Is there any good way to show in center for only some components?

CodePudding user response：

The Storybook documentation contains a section for component level layout.

Instead of configuring it globally in the preview, you can add it to the individual story file.

// *.stories.js|jsx|ts|tsx

export default {
  // Other config options...

  // Sets the layout parameter component wide.
  parameters: {
    layout: 'centered',
  },
};