CODEWITHSUNDEEP
javascriptreactjsstorybook
DGomez
DGomez

Reputation: 399

problems with storybook with Background parameters

I'm on a project with a storybook and I want my story to be able to change the background or put a background whatever since I only need a background of a different color but I can't put background as it says in the documentation:

https://storybook.js.org/docs/react/essentials/backgrounds

export default {
  title: 'Button',
  parameters: {
    backgrounds: {
      default: 'twitter',
      values: [
        { name: 'twitter', value: '#00aced' },
        { name: 'facebook', value: '#3b5998' },
      ],
    },
  },
};

and my code is like this:

export default {
  title: "Atoms/Example",
  component,
  parameters: {
    backgrounds: {
      default: "black",
      values: [
        { name: "black", value: "#000000" },
        { name: "white", value: "#ffffff" }
      ]
    }
  },
  argTypes: {
    is: {
      control: {
        type: "select",
        options: [25, 33, 50, 75, 100]
      }
    }
  }
}

but my code does not work at all and seeing from the documentation everything is correct.

or if there is any way to put a background to my story even if it is not dynamic if not a fixed one

Upvotes: 9

Views: 5904

Answers (2)

Vicktor
Vicktor

Reputation: 368

I've experienced this before, but it looks like in your case, you didn't specify which component to render in the component property of your Component Story Format export.

export default {
  title: "Atoms/Example",
  component, // <- Component not specified

  // Other properties here...
}

Try specifying the component like so, and see if the problem persists.

export default {
  title: "Atoms/Example",
  component: Button, // <- Component to render added

  // Other properties...
}

Upvotes: 0

jonnie
jonnie

Reputation: 12710

Make sure you have @storybook/addon-backgrounds installed and in the .storybook/main.js file make sure its in your addons: addons: ['@storybook/addon-backgrounds']

Note make sure its: addons: ['@storybook/addon-backgrounds'] and not addons: ['@storybook/addon-backgrounds/register']

using register was the old way and will prevent it from working correctly

Upvotes: 6

Related Questions