From fb59702c74232b74bcedb9619a7a01bbbcfc3bdd Mon Sep 17 00:00:00 2001
From: Gregory Quinio <1063530+gqio@users.noreply.github.com>
Date: Fri, 16 Sep 2022 16:04:56 +0200
Subject: [PATCH] Storybook: use div #root styles on storybook preview instead
 of additional div wrapper (#55023)

* feat: use styles on #root div instead of additionnal div wrapper

* Update packages/grafana-ui/src/utils/storybook/withTheme.tsx

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>
---
 .../src/utils/storybook/withTheme.tsx         | 23 +++++++++----------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/packages/grafana-ui/src/utils/storybook/withTheme.tsx b/packages/grafana-ui/src/utils/storybook/withTheme.tsx
index 2580acf3b6b..785ae08cf29 100644
--- a/packages/grafana-ui/src/utils/storybook/withTheme.tsx
+++ b/packages/grafana-ui/src/utils/storybook/withTheme.tsx
@@ -16,20 +16,19 @@ const ThemeableStory: React.FunctionComponent<{ handleSassThemeChange: SassTheme
 
   handleSassThemeChange(theme);
 
+  const css = `#root {
+    width: 100%;
+    padding: 20px;
+    display: flex;
+    min-height: 100%;
+    background: ${theme.colors.background.primary};
+  }`;
+
   return (
     <ThemeContext.Provider value={theme}>
-      <div
-        style={{
-          width: '100%',
-          padding: '20px',
-          display: 'flex',
-          minHeight: '100%',
-          background: `${theme.colors.background.primary}`,
-        }}
-      >
-        <GlobalStyles />
-        {children}
-      </div>
+      <GlobalStyles />
+      <style>{css}</style>
+      {children}
     </ThemeContext.Provider>
   );
 };