Update CSS class for the Panel instead of a Row

src/components/Text/Text.tsx

@@ -110,7 +110,8 @@
     styles.frame,
     css`
       ${options.styles ? replaceVariables(options.styles) : ''}
-    `
+    `,
+    'dt-row'
   );
 
   /**
@@ -187,7 +188,7 @@
         const templateData = frames.map((frame) =>
           frame.fields.reduce(
             (acc, { config, name, values, display }) => {
               values.toArray().forEach((value, i) => {
                 /**
                  * Status Color
                  */

src/components/TextPanel/TextPanel.test.tsx

@@ -6,6 +6,7 @@ import React from 'react';
 import { CodeLanguage, Format, TEST_IDS } from '../../constants';
 import { PanelOptions, RenderMode } from '../../types';
 import { TextPanel } from './TextPanel';
+import { injectGlobal } from '@emotion/css';
 
 /**
  * Props
@@ -19,6 +20,14 @@ jest.mock('@grafana/runtime', () => ({
   ...jest.requireActual('@grafana/runtime'),
 }));
 
+/**
+ * Mock @emotion/css
+ */
+jest.mock('@emotion/css', () => ({
+  ...jest.requireActual('@emotion/css'),
+  injectGlobal: jest.fn(),
+}));
+
 /**
  * Mock @grafana/ui
  */
@@ -159,6 +168,40 @@ describe('Panel', () => {
     expect(streamSubscribe).toHaveBeenCalled();
   });
 
+  it('Should apply css for component', async () => {
+    jest.mocked(injectGlobal);
+
+    const streamSubscribe = jest.fn(() => ({
+      unsubscribe: jest.fn(),
+    }));
+
+    const eventBus = {
+      getStream: jest.fn(() => ({
+        subscribe: streamSubscribe,
+      })),
+    };
+
+    await act(async () =>
+      render(
+        getComponent({
+          options: {
+            ...defaultOptions,
+            defaultContent: 'hello',
+            styles: 'styles-test',
+          },
+          replaceVariables: (str: string) => str,
+          data: { series: [] } as any,
+          eventBus: eventBus as any,
+        })
+      )
+    );
+
+    expect(screen.getByTestId(TEST_IDS.panel.root)).toBeInTheDocument();
+    expect(injectGlobal).toHaveBeenCalledTimes(2);
+    expect(injectGlobal).toHaveBeenCalledWith('');
+    expect(injectGlobal).toHaveBeenCalledWith('styles-test');
+  });
+
   describe('Helpers execution', () => {
     const helpers = `
       const subscription = eventBus.subscribe('event', () => {});

src/components/TextPanel/TextPanel.tsx

@@ -1,4 +1,4 @@
-import { css, cx } from '@emotion/css';
+import { css, cx, injectGlobal } from '@emotion/css';
 import { PanelProps, SelectableValue } from '@grafana/data';
 import { RefreshEvent } from '@grafana/runtime';
 import { Select, useStyles2 } from '@grafana/ui';
@@ -26,6 +26,7 @@ export const TextPanel: React.FC<Props> = ({
   timeRange,
   timeZone,
   eventBus,
+  id,
   replaceVariables,
 }) => {
   /**
@@ -38,6 +39,12 @@ export const TextPanel: React.FC<Props> = ({
    * Styles
    */
   const styles = useStyles2(getStyles);
+  const panelStyles = options.styles ? replaceVariables(options.styles) : '';
+
+  /**
+   * Injects styles into the global scope (need for dt-row-___ classes)
+   */
+  injectGlobal(panelStyles);
 
   /**
    * Change Frame
@@ -121,7 +128,9 @@ export const TextPanel: React.FC<Props> = ({
               css`
                 flex-grow: 1;
                 overflow: auto;
-              `
+              `,
+              'dt-row-container',
+              `dt-row-container-${id}`
             )}
           >
             <Text