Storybook: Bootstrap import breaks background grid

[ghost]

Describe the bug
After importing Bootstrap CSS the background grid is no longer displayed.

To Reproduce
Steps to reproduce the behavior:

1. Add import 'bootstrap/dist/css/bootstrap.css'; to config.js

Expected behavior
I expected the background grid to be present.

Screenshots
N/A

Code snippets
N/A

System:

• OS: Ubuntu
• Device: PC
• Browser: Chromium
• Framework: React

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[Tony-Donghua-Han]

The problem seems to relates to the background on the body of the iFrame being set to color other than transparent. Currently resetting the background color after importing bootstrap seem to have helped.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[nikdo]

I think this can be safely closed. Bootstrap sets body background, resetting it manually for usage in Storybook sounds like a proper solution.

The other solution is to change storybook to set a transparent body background using !important. But I'm not sure this is reasonable.

[nikdo]

.storybook/config.js:

import 'bootstrap/dist/css/bootstrap.css'
import './reset.css'

...

.storybook/reset.css:

body {
  background-color: transparent;
}