Can't change background of canvas

Describe the bug I can’t change the background of the canvas. Also looking at the tutorials the canvas should have white background but for some reason mine is grey.

To Reproduce Clone repo at: https://github.com/jauggy/storybook-background-issues

npm i

npm run storybook

Notice the Canvas background is gray. Also when clicking the background addons you can’t change it.

Expected behavior White background on canvas and ability to change the canvas background via the background addon.

Screenshots If applicable, add screenshots to help explain your problem.

Code snippets If applicable, add code samples to help explain your problem.

System:

Environment Info:

  System:
    OS: Windows 10 10.0.19041
    CPU: (4) x64 Intel(R) Core(TM) i5-2500 CPU @ 3.30GHz
  Binaries:
    Node: 12.18.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.5 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 84.0.4147.135
    Edge: Spartan (44.19041.423.0), Chromium (85.0.564.41)
  npmPackages:
    @storybook/addon-essentials: ^6.0.20 => 6.0.20
    @storybook/react: ^6.0.20 => 6.0.20

Additional context Add any other context about the problem here.

[yannbf]

Hey @jauggy thanks a lot for putting up a reproduction! It helps a lot. The reason the addon does not work is that the lib you’re using, CoreUI, sets a default background color at the body level. This is the line of code that gives the side effect:

@import "~@coreui/coreui/scss/coreui"

In storybook 6.0, the background is set at the iframe level, which is less specific than the body. In Storybook 6.1 this problem is fixed. This is your storybook running with ^6.1.0-alpha.23:

Also, Storybook 6 supports typescript out of the box! So you can remove these lines from your main.js:

webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: ["style-loader", "css-loader", "sass-loader"],
      include: path.resolve(__dirname, "../"),
    });

-    config.module.rules.push({
-      test: /\.(ts|tsx)$/,
-      loader: require.resolve("babel-loader"),
-      options: {
-        presets: [["react-app", { flow: false, typescript: true }]],
-      },
-    });
-    config.resolve.extensions.push(".ts", ".tsx");

    return config;
},

You can also use main.ts and preview.(ts|tsx)!

[petomi]

I had the same issue in 6.0.5 (docs Canvas elements not using the same background-color that they do in the sandbox mode) but this issue appears to be solved by updating to Storybook 6.1.1.