From 50c70303ffcd60d4d981a67b589edb7b75dfd587 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20Jamr=C3=B3z?= <pm.jamroz@gmail.com>
Date: Mon, 16 Aug 2021 10:32:44 +0200
Subject: [PATCH] Use styles instead of direct css

---
 .../graphite/components/GraphiteQueryEditor.tsx        | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/public/app/plugins/datasource/graphite/components/GraphiteQueryEditor.tsx b/public/app/plugins/datasource/graphite/components/GraphiteQueryEditor.tsx
index 4ec63d3677d..c19a5e79f23 100644
--- a/public/app/plugins/datasource/graphite/components/GraphiteQueryEditor.tsx
+++ b/public/app/plugins/datasource/graphite/components/GraphiteQueryEditor.tsx
@@ -28,8 +28,8 @@ function GraphiteQueryEditorContent() {
   const styles = useStyles2(getStyles);
 
   return (
-    <div className={css({ display: 'flex' })}>
-      <div className={css({ flexGrow: 1 })}>
+    <div className={styles.container}>
+      <div className={styles.visualEditor}>
         {state.target?.textEditor && <GraphiteTextEditor rawQuery={state.target.target} />}
         {!state.target?.textEditor && (
           <>
@@ -52,6 +52,12 @@ function GraphiteQueryEditorContent() {
 
 function getStyles(theme: GrafanaTheme2) {
   return {
+    container: css`
+      display: flex;
+    `,
+    visualEditor: css`
+      flex-grow: 1;
+    `,
     toggleButton: css`
       margin-left: ${theme.spacing(0.5)};
     `,