problems with storybook with Background parameters

Question

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

Vasiliu

feel like there is something else, because your code above should work. – Kirstiekirstin

Answer 1

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

Woodrow

Answer 2

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...
}

Michaelemichaelina