From 0033e3afc303e5cda91774bbcba3667f5e44131f Mon Sep 17 00:00:00 2001
From: Michael Shilman <shilman@users.noreply.github.com>
Date: Sat, 16 Mar 2019 06:12:04 +0800
Subject: [PATCH] Merge pull request #6042 from glitchperfect/patch-4

fix (addon/backgrounds): addon panel doesn't hide
---
 .../backgrounds/src/containers/BackgroundSelector.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/addons/backgrounds/src/containers/BackgroundSelector.tsx b/addons/backgrounds/src/containers/BackgroundSelector.tsx
index 7a3f634017a7..220d14359442 100644
--- a/addons/backgrounds/src/containers/BackgroundSelector.tsx
+++ b/addons/backgrounds/src/containers/BackgroundSelector.tsx
@@ -1,7 +1,7 @@
 import React, { Component, Fragment } from 'react';
 import memoize from 'memoizerific';
 
-import { Global } from '@storybook/theming';
+import { Global, Theme } from '@storybook/theming';
 
 import { SET_STORIES } from '@storybook/core-events';
 
@@ -125,11 +125,14 @@ export class BackgroundSelector extends Component<BackgroundToolProps, Backgroun
       <Fragment>
         {selectedBackgroundColor ? (
           <Global
-            styles={{
+            styles={(theme: Theme) => ({
               [`#${iframeId}`]: {
-                background: selectedBackgroundColor,
+                background:
+                  selectedBackgroundColor === 'transparent'
+                    ? theme.background.content
+                    : selectedBackgroundColor,
               },
-            }}
+            })}
           />
         ) : null}
         <WithTooltip