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:

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",
  ponent,
  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

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/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",
  ponent,
  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

• javascript
• reactjs
• storybook

• feel like there is something else, because your code above should work. – maxisam Commented Sep 30, 2021 at 23:13

2 Answers 2

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

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

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

  // Other properties here...
}

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

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

  // Other properties...
}