Background and Grid toolbar options not working when ChakraProvider is in decorators

[hazem3500]

Describe the bug
When adding ChakraProvider in the decorators the background & grid toolbar option don't work

To Reproduce

1. Add ChakraProvider as a decorator in preview.js

// preview.js
import { ChakraProvider, theme } from "@chakra-ui/core"

export const decorators = [
    (Story) => (
        <ChakraProvider resetCSS theme={theme}>
            <Story />
        </ChakraProvider>
    ),
];

2. Choose an option from the background toolbar or click on the grid toolbar option

Expected behavior

The background and grid toolbar options to work as usual

Screenshots

System:

Environment Info:

System:
OS: Windows 10 10.0.18362
CPU: (4) x64 Intel(R) Core(TM) i5-6500 CPU @ 3.20GHz
Binaries:
Node: 14.8.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.4 - C:\Program Files\nodejs\yarn.CMD
npm: 6.14.7 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: 85.0.4183.83
Edge: Spartan (44.18362.449.0)
npmPackages:
@storybook/addon-a11y: ^6.0.21 => 6.0.21
@storybook/addon-actions: ^6.0.20 => 6.0.21
@storybook/addon-console: ^1.2.1 => 1.2.1
@storybook/addon-essentials: ^6.0.20 => 6.0.21
@storybook/addon-links: ^6.0.20 => 6.0.21
@storybook/node-logger: ^6.0.20 => 6.0.21
@storybook/preset-create-react-app: ^3.1.4 => 3.1.4
@storybook/react: ^6.0.20 => 6.0.21

[Marklb]

Normally means your global stylesheet is applying a background color to the body, which hides the styles applied behind the iframe.

If you don't care about your app theme's background color, the following can be added to .storybook/preview-head.html.

// .storybook/preview-head.html
<style>
  body.sb-show-main { background-color: transparent; }
</style>

To only disable your app theme's background color when the background addon is active, you could add a Storybook addon that observes the background addon's state to toggle your app's background color css rule only when the addon is active, but it doesn't expose that state as well as it should probably. I wrote a small local addon to do that a while ago, but it was a hacky mess. When I get a chance I may try updating it. The messy one I wrote is posted here: #8575 (comment)

[shilman]

Crikey!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.1.0-alpha.16 containing PR #12368 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.