diff --git a/.betterer.results b/.betterer.results
index 8d5def88db4..d9446d6b110 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -2765,43 +2765,8 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "3"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "4"]
     ],
-    "public/app/features/canvas/elements/droneFront.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
-    ],
-    "public/app/features/canvas/elements/droneSide.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
-    ],
-    "public/app/features/canvas/elements/droneTop.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"]
-    ],
     "public/app/features/canvas/elements/ellipse.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"]
-    ],
-    "public/app/features/canvas/elements/icon.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
-    ],
-    "public/app/features/canvas/elements/metricValue.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"]
-    ],
-    "public/app/features/canvas/elements/server/server.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"],
-      [0, 0, 0, "Styles should be written using objects.", "3"],
-      [0, 0, 0, "Styles should be written using objects.", "4"]
-    ],
-    "public/app/features/canvas/elements/text.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"]
-    ],
-    "public/app/features/canvas/elements/windTurbine.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
     "public/app/features/canvas/runtime/element.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
@@ -7005,77 +6970,24 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
     ],
-    "public/app/plugins/panel/canvas/components/CanvasContextMenu.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
-    ],
-    "public/app/plugins/panel/canvas/components/CanvasTooltip.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
-    ],
-    "public/app/plugins/panel/canvas/components/SetBackground.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
-    ],
-    "public/app/plugins/panel/canvas/components/connections/ConnectionAnchors.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"],
-      [0, 0, 0, "Styles should be written using objects.", "3"]
-    ],
-    "public/app/plugins/panel/canvas/components/connections/ConnectionSVG.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"]
-    ],
-    "public/app/plugins/panel/canvas/editor/connectionEditor.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
-    ],
     "public/app/plugins/panel/canvas/editor/element/APIEditor.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
-    "public/app/plugins/panel/canvas/editor/element/ConstraintSelectionBox.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"],
-      [0, 0, 0, "Styles should be written using objects.", "3"],
-      [0, 0, 0, "Styles should be written using objects.", "4"],
-      [0, 0, 0, "Styles should be written using objects.", "5"],
-      [0, 0, 0, "Styles should be written using objects.", "6"],
-      [0, 0, 0, "Styles should be written using objects.", "7"]
-    ],
     "public/app/plugins/panel/canvas/editor/element/PlacementEditor.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
-    "public/app/plugins/panel/canvas/editor/element/QuickPositioning.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"]
-    ],
     "public/app/plugins/panel/canvas/editor/element/elementEditor.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
     ],
-    "public/app/plugins/panel/canvas/editor/inline/InlineEdit.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"],
-      [0, 0, 0, "Styles should be written using objects.", "3"],
-      [0, 0, 0, "Styles should be written using objects.", "4"],
-      [0, 0, 0, "Styles should be written using objects.", "5"],
-      [0, 0, 0, "Styles should be written using objects.", "6"]
-    ],
     "public/app/plugins/panel/canvas/editor/inline/InlineEditBody.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
       [0, 0, 0, "Do not use any type assertions.", "2"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "3"],
-      [0, 0, 0, "Styles should be written using objects.", "4"]
+      [0, 0, 0, "Unexpected any. Specify a different type.", "3"]
     ],
     "public/app/plugins/panel/canvas/editor/layer/TreeNavigationEditor.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"]
-    ],
-    "public/app/plugins/panel/canvas/editor/layer/TreeNodeTitle.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"],
-      [0, 0, 0, "Styles should be written using objects.", "3"]
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
     "public/app/plugins/panel/canvas/editor/layer/layerEditor.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],
diff --git a/public/app/features/canvas/elements/droneFront.tsx b/public/app/features/canvas/elements/droneFront.tsx
index c91a92fe62f..9ce31d8f8ac 100644
--- a/public/app/features/canvas/elements/droneFront.tsx
+++ b/public/app/features/canvas/elements/droneFront.tsx
@@ -118,7 +118,7 @@ export const droneFrontItem: CanvasElementItem = {
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  droneFront: css`
-    transition: transform 0.4s;
-  `,
+  droneFront: css({
+    transition: 'transform 0.4s',
+  }),
 });
diff --git a/public/app/features/canvas/elements/droneSide.tsx b/public/app/features/canvas/elements/droneSide.tsx
index bc84404b19a..8ae6fcc6a21 100644
--- a/public/app/features/canvas/elements/droneSide.tsx
+++ b/public/app/features/canvas/elements/droneSide.tsx
@@ -117,7 +117,7 @@ export const droneSideItem: CanvasElementItem = {
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  droneSide: css`
-    transition: transform 0.4s;
-  `,
+  droneSide: css({
+    transition: 'transform 0.4s',
+  }),
 });
diff --git a/public/app/features/canvas/elements/droneTop.tsx b/public/app/features/canvas/elements/droneTop.tsx
index 84a14885b5f..d1fb4174cbb 100644
--- a/public/app/features/canvas/elements/droneTop.tsx
+++ b/public/app/features/canvas/elements/droneTop.tsx
@@ -156,23 +156,23 @@ export const droneTopItem: CanvasElementItem = {
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  propeller: css`
-    transform-origin: 50% 50%;
-    transform-box: fill-box;
-    display: block;
-    @keyframes spin {
-      from {
-        transform: rotate(0deg);
-      }
-      to {
-        transform: rotate(360deg);
-      }
-    }
-  `,
-  propellerCW: css`
-    animation-direction: normal;
-  `,
-  propellerCCW: css`
-    animation-direction: reverse;
-  `,
+  propeller: css({
+    transformOrigin: '50% 50%',
+    transformBox: 'fill-box',
+    display: 'block',
+    '@keyframes spin': {
+      from: {
+        transform: 'rotate(0deg)',
+      },
+      to: {
+        transform: 'rotate(360deg)',
+      },
+    },
+  }),
+  propellerCW: css({
+    animationDirection: 'normal',
+  }),
+  propellerCCW: css({
+    animationDirection: 'reverse',
+  }),
 });
diff --git a/public/app/features/canvas/elements/ellipse.tsx b/public/app/features/canvas/elements/ellipse.tsx
index 00bf1b8c936..2cac9ba1de4 100644
--- a/public/app/features/canvas/elements/ellipse.tsx
+++ b/public/app/features/canvas/elements/ellipse.tsx
@@ -2,7 +2,6 @@ import { css } from '@emotion/css';
 import React, { PureComponent } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { stylesFactory } from '@grafana/ui';
 import { config } from 'app/core/config';
 import { DimensionContext } from 'app/features/dimensions/context';
 import { ColorDimensionEditor } from 'app/features/dimensions/editors/ColorDimensionEditor';
@@ -23,26 +22,27 @@ class EllipseDisplay extends PureComponent<CanvasElementProps<EllipseConfig, Ell
   }
 }
 
-const getStyles = stylesFactory((theme: GrafanaTheme2, data) => ({
-  container: css`
-    display: table;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 100%;
-    height: 100%;
-    background-color: ${data?.backgroundColor};
-    border: ${data?.width}px solid ${data?.borderColor};
-    border-radius: 50%;
-  `,
-  span: css`
-    display: table-cell;
-    vertical-align: ${data?.valign};
-    text-align: ${data?.align};
-    font-size: ${data?.size}px;
-    color: ${data?.color};
-  `,
-}));
+const getStyles = (theme: GrafanaTheme2, data: any) => ({
+  container: css({
+    display: 'table',
+    position: 'absolute',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    width: '100%',
+    height: '100%',
+    backgroundColor: data?.backgroundColor,
+    border: `${data?.width}px solid ${data?.borderColor}`,
+    // eslint-disable-next-line @grafana/no-border-radius-literal
+    borderRadius: '50%',
+  }),
+  span: css({
+    display: 'table-cell',
+    verticalAlign: data?.valign,
+    textAlign: data?.align,
+    fontSize: `${data?.size}px`,
+    color: data?.color,
+  }),
+});
 
 export const ellipseItem: CanvasElementItem<EllipseConfig, EllipseData> = {
   id: 'ellipse',
diff --git a/public/app/features/canvas/elements/icon.tsx b/public/app/features/canvas/elements/icon.tsx
index 8f3ad8adac3..c6c66317887 100644
--- a/public/app/features/canvas/elements/icon.tsx
+++ b/public/app/features/canvas/elements/icon.tsx
@@ -25,11 +25,11 @@ interface IconData {
 }
 
 // When a stoke is defined, we want the path to be in page units
-const svgStrokePathClass = css`
-  path {
-    vector-effect: non-scaling-stroke;
-  }
-`;
+const svgStrokePathClass = css({
+  path: {
+    vectorEffect: 'non-scaling-stroke',
+  },
+});
 
 export function IconDisplay(props: CanvasElementProps) {
   const { data } = props;
diff --git a/public/app/features/canvas/elements/metricValue.tsx b/public/app/features/canvas/elements/metricValue.tsx
index f98dc1979cf..76ed7a01f1a 100644
--- a/public/app/features/canvas/elements/metricValue.tsx
+++ b/public/app/features/canvas/elements/metricValue.tsx
@@ -111,26 +111,26 @@ const MetricValueEdit = (props: CanvasElementProps<TextConfig, TextData>) => {
 };
 
 const getStyles = (data: TextData | undefined) => (theme: GrafanaTheme2) => ({
-  container: css`
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    display: table;
-  `,
-  inlineEditorContainer: css`
-    height: 100%;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    padding: 10px;
-  `,
-  span: css`
-    display: table-cell;
-    vertical-align: ${data?.valign};
-    text-align: ${data?.align};
-    font-size: ${data?.size}px;
-    color: ${data?.color};
-  `,
+  container: css({
+    position: 'absolute',
+    height: '100%',
+    width: '100%',
+    display: 'table',
+  }),
+  inlineEditorContainer: css({
+    height: '100%',
+    width: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    padding: theme.spacing(1),
+  }),
+  span: css({
+    display: 'table-cell',
+    verticalAlign: data?.valign,
+    textAlign: data?.align,
+    fontSize: `${data?.size}px`,
+    color: data?.color,
+  }),
 });
 
 export const metricValueItem: CanvasElementItem<TextConfig, TextData> = {
diff --git a/public/app/features/canvas/elements/server/server.tsx b/public/app/features/canvas/elements/server/server.tsx
index e56e8aa0285..aaee1ea6336 100644
--- a/public/app/features/canvas/elements/server/server.tsx
+++ b/public/app/features/canvas/elements/server/server.tsx
@@ -147,36 +147,36 @@ export const serverItem: CanvasElementItem<ServerConfig, ServerData> = {
 };
 
 export const getServerStyles = (data: ServerData | undefined) => (theme: GrafanaTheme2) => ({
-  bulb: css`
-    @keyframes blink {
-      0% {
-        fill-opacity: 0;
-      }
-      50% {
-        fill-opacity: 1;
-      }
-      100% {
-        fill-opacity: 0;
-      }
-    }
-  `,
-  server: css`
-    fill: ${data?.statusColor ?? 'transparent'};
-  `,
-  circle: css`
-    animation: blink ${data?.blinkRate ? 1 / data.blinkRate : 0}s infinite step-end;
-    fill: ${data?.bulbColor};
-    stroke: none;
-  `,
-  circleBack: css`
-    fill: ${outlineColor};
-    stroke: none;
-    opacity: 1;
-  `,
-  outline: css`
-    stroke: ${outlineColor};
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    stroke-width: 4px;
-  `,
+  bulb: css({
+    '@keyframes blink': {
+      '0%': {
+        fillOpacity: 0,
+      },
+      '50%': {
+        fillOpacity: 1,
+      },
+      '100%': {
+        fillOpacity: 0,
+      },
+    },
+  }),
+  server: css({
+    fill: data?.statusColor ?? 'transparent',
+  }),
+  circle: css({
+    animation: `blink ${data?.blinkRate ? 1 / data.blinkRate : 0}s infinite step-end`,
+    fill: data?.bulbColor,
+    stroke: 'none',
+  }),
+  circleBack: css({
+    fill: outlineColor,
+    stroke: 'none',
+    opacity: 1,
+  }),
+  outline: css({
+    stroke: outlineColor,
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    strokeWidth: '4px',
+  }),
 });
diff --git a/public/app/features/canvas/elements/text.tsx b/public/app/features/canvas/elements/text.tsx
index 92773b50575..3abd83d8d7c 100644
--- a/public/app/features/canvas/elements/text.tsx
+++ b/public/app/features/canvas/elements/text.tsx
@@ -95,26 +95,26 @@ const TextEdit = (props: CanvasElementProps<TextConfig, TextData>) => {
 };
 
 const getStyles = (data: TextData | undefined) => (theme: GrafanaTheme2) => ({
-  container: css`
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    display: table;
-  `,
-  inlineEditorContainer: css`
-    height: 100%;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    padding: 10px;
-  `,
-  span: css`
-    display: table-cell;
-    vertical-align: ${data?.valign};
-    text-align: ${data?.align};
-    font-size: ${data?.size}px;
-    color: ${data?.color};
-  `,
+  container: css({
+    position: 'absolute',
+    height: '100%',
+    width: '100%',
+    display: 'table',
+  }),
+  inlineEditorContainer: css({
+    height: '100%',
+    width: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    padding: theme.spacing(1),
+  }),
+  span: css({
+    display: 'table-cell',
+    verticalAlign: data?.valign,
+    textAlign: data?.align,
+    fontSize: `${data?.size}px`,
+    color: data?.color,
+  }),
 });
 
 export const textItem: CanvasElementItem<TextConfig, TextData> = {
diff --git a/public/app/features/canvas/elements/windTurbine.tsx b/public/app/features/canvas/elements/windTurbine.tsx
index db593e265e6..1d90339e204 100644
--- a/public/app/features/canvas/elements/windTurbine.tsx
+++ b/public/app/features/canvas/elements/windTurbine.tsx
@@ -113,17 +113,16 @@ export const windTurbineItem: CanvasElementItem = {
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  blade: css`
-    @keyframes spin {
-      from {
-        transform: rotate(0deg);
-      }
-      to {
-        transform: rotate(360deg);
-      }
-    }
-
-    transform-origin: 94.663px 94.663px;
-    transform: rotate(15deg);
-  `,
+  blade: css({
+    transformOrigin: '94.663px 94.663px',
+    transform: 'rotate(15deg)',
+    '@keyframes spin': {
+      from: {
+        transform: 'rotate(0deg)',
+      },
+      to: {
+        transform: 'rotate(360deg)',
+      },
+    },
+  }),
 });
diff --git a/public/app/plugins/panel/canvas/components/CanvasContextMenu.tsx b/public/app/plugins/panel/canvas/components/CanvasContextMenu.tsx
index c5868fbbcf2..5d11484f53f 100644
--- a/public/app/plugins/panel/canvas/components/CanvasContextMenu.tsx
+++ b/public/app/plugins/panel/canvas/components/CanvasContextMenu.tsx
@@ -244,7 +244,7 @@ export const CanvasContextMenu = ({ scene, panel }: Props) => {
 };
 
 const getStyles = () => ({
-  menuItem: css`
-    max-width: 200px;
-  `,
+  menuItem: css({
+    maxWidth: '200px',
+  }),
 });
diff --git a/public/app/plugins/panel/canvas/components/CanvasTooltip.tsx b/public/app/plugins/panel/canvas/components/CanvasTooltip.tsx
index 6fb46c975a4..da5dbbfee7e 100644
--- a/public/app/plugins/panel/canvas/components/CanvasTooltip.tsx
+++ b/public/app/plugins/panel/canvas/components/CanvasTooltip.tsx
@@ -73,8 +73,8 @@ export const CanvasTooltip = ({ scene }: Props) => {
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  wrapper: css`
-    margin-top: 20px;
-    background: ${theme.colors.background.primary};
-  `,
+  wrapper: css({
+    marginTop: '20px',
+    background: theme.colors.background.primary,
+  }),
 });
diff --git a/public/app/plugins/panel/canvas/components/SetBackground.tsx b/public/app/plugins/panel/canvas/components/SetBackground.tsx
index 9b353a096f1..60284cfefee 100644
--- a/public/app/plugins/panel/canvas/components/SetBackground.tsx
+++ b/public/app/plugins/panel/canvas/components/SetBackground.tsx
@@ -59,9 +59,9 @@ export function SetBackground({ onClose, scene, anchorPoint }: Props) {
 }
 
 const getStyles = (theme: GrafanaTheme2, anchorPoint: AnchorPoint) => ({
-  portalWrapper: css`
-    width: 315px;
-    height: 445px;
-    transform: translate(${anchorPoint.x}px, ${anchorPoint.y - 200}px);
-  `,
+  portalWrapper: css({
+    width: '315px',
+    height: '445px',
+    transform: `translate(${anchorPoint.x}px, ${anchorPoint.y - 200}px)`,
+  }),
 });
diff --git a/public/app/plugins/panel/canvas/components/connections/ConnectionAnchors.tsx b/public/app/plugins/panel/canvas/components/connections/ConnectionAnchors.tsx
index 944be9d2ffd..93ff6531756 100644
--- a/public/app/plugins/panel/canvas/components/connections/ConnectionAnchors.tsx
+++ b/public/app/plugins/panel/canvas/components/connections/ConnectionAnchors.tsx
@@ -114,36 +114,35 @@ export const ConnectionAnchors = ({ setRef, handleMouseLeave }: Props) => {
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  root: css`
-    position: absolute;
-    display: none;
-  `,
-  mouseoutDiv: css`
-    position: absolute;
-    margin: -30px;
-    width: calc(100% + 60px);
-    height: calc(100% + 60px);
-  `,
-  anchor: css`
-    padding: ${ANCHOR_PADDING}px;
-    position: absolute;
-    cursor: cursor;
-    width: calc(5px + 2 * ${ANCHOR_PADDING}px);
-    height: calc(5px + 2 * ${ANCHOR_PADDING}px);
-    z-index: 100;
-    pointer-events: auto !important;
-  `,
-  highlightElement: css`
-    background-color: #00ff00;
-    opacity: 0.3;
-    position: absolute;
-    cursor: cursor;
-    position: absolute;
-    pointer-events: auto;
-    width: 16px;
-    height: 16px;
-    border-radius: ${theme.shape.radius.circle};
-    display: none;
-    z-index: 110;
-  `,
+  root: css({
+    position: 'absolute',
+    display: 'none',
+  }),
+  mouseoutDiv: css({
+    position: 'absolute',
+    margin: '-30px',
+    width: 'calc(100% + 60px)',
+    height: 'calc(100% + 60px)',
+  }),
+  anchor: css({
+    padding: `${ANCHOR_PADDING}px`,
+    position: 'absolute',
+    cursor: 'cursor',
+    width: `calc(5px + 2 * ${ANCHOR_PADDING}px)`,
+    height: `calc(5px + 2 * ${ANCHOR_PADDING}px)`,
+    zIndex: 100,
+    pointerEvents: 'auto',
+  }),
+  highlightElement: css({
+    backgroundColor: '#00ff00',
+    opacity: 0.3,
+    position: 'absolute',
+    cursor: 'cursor',
+    pointerEvents: 'auto',
+    width: '16px',
+    height: '16px',
+    borderRadius: theme.shape.radius.circle,
+    display: 'none',
+    zIndex: 110,
+  }),
 });
diff --git a/public/app/plugins/panel/canvas/components/connections/ConnectionSVG.tsx b/public/app/plugins/panel/canvas/components/connections/ConnectionSVG.tsx
index ca40af12200..47a3bde9eb8 100644
--- a/public/app/plugins/panel/canvas/components/connections/ConnectionSVG.tsx
+++ b/public/app/plugins/panel/canvas/components/connections/ConnectionSVG.tsx
@@ -231,19 +231,19 @@ export const ConnectionSVG = ({ setSVGRef, setLineRef, scene }: Props) => {
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  editorSVG: css`
-    position: absolute;
-    pointer-events: none;
-    width: 100%;
-    height: 100%;
-    z-index: 1000;
-    display: none;
-  `,
-  connection: css`
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    z-index: 1000;
-    pointer-events: none;
-  `,
+  editorSVG: css({
+    position: 'absolute',
+    pointerEvents: 'none',
+    width: '100%',
+    height: '100%',
+    zIndex: 1000,
+    display: 'none',
+  }),
+  connection: css({
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    zIndex: 1000,
+    pointerEvents: 'none',
+  }),
 });
diff --git a/public/app/plugins/panel/canvas/editor/connectionEditor.tsx b/public/app/plugins/panel/canvas/editor/connectionEditor.tsx
index 49689915cac..480d5ac041f 100644
--- a/public/app/plugins/panel/canvas/editor/connectionEditor.tsx
+++ b/public/app/plugins/panel/canvas/editor/connectionEditor.tsx
@@ -24,9 +24,8 @@ export function getConnectionEditor(opts: CanvasConnectionEditorOptions): Nested
       getValue: (path: string) => {
         return lodashGet(opts.connection.info, path);
       },
-      // TODO: Fix this any (maybe a dimension supplier?)
-      onChange: (path: string, value: any) => {
-        console.log(value, typeof value);
+      // TODO: Fix this unknown (maybe a dimension supplier?)
+      onChange: (path: string, value: unknown) => {
         let options = opts.connection.info;
         options = setOptionImmutably(options, path, value);
         opts.scene.connections.onChange(opts.connection, options);
diff --git a/public/app/plugins/panel/canvas/editor/element/ConstraintSelectionBox.tsx b/public/app/plugins/panel/canvas/editor/element/ConstraintSelectionBox.tsx
index 8f8237763de..50a895cbae1 100644
--- a/public/app/plugins/panel/canvas/editor/element/ConstraintSelectionBox.tsx
+++ b/public/app/plugins/panel/canvas/editor/element/ConstraintSelectionBox.tsx
@@ -141,48 +141,84 @@ const getStyles = (currentConstraints: Constraint) => (theme: GrafanaTheme2) =>
   const selectionBoxColor = theme.isDark ? '#ffffff' : '#000000';
 
   return {
-    constraintHover: css`
-      &:hover {
-        fill: ${HOVER_COLOR};
-        fill-opacity: ${HOVER_OPACITY};
-      }
-    `,
-    topConstraint: css`
-      ${currentConstraints.vertical === VerticalConstraint.Top ||
+    constraintHover: css({
+      '&:hover': {
+        fill: HOVER_COLOR,
+        fillOpacity: HOVER_OPACITY,
+      },
+    }),
+    topConstraint: css({
+      ...(currentConstraints.vertical === VerticalConstraint.Top ||
       currentConstraints.vertical === VerticalConstraint.TopBottom
-        ? `width: 92pt; x: 1085; fill: ${SELECTED_COLOR};`
-        : `fill: ${selectionBoxColor};`}
-    `,
-    bottomConstraint: css`
-      ${currentConstraints.vertical === VerticalConstraint.Bottom ||
+        ? {
+            width: '92pt',
+            x: '1085',
+            fill: SELECTED_COLOR,
+          }
+        : {
+            fill: selectionBoxColor,
+          }),
+    }),
+    bottomConstraint: css({
+      ...(currentConstraints.vertical === VerticalConstraint.Bottom ||
       currentConstraints.vertical === VerticalConstraint.TopBottom
-        ? `width: 92pt; x: 1085; fill: ${SELECTED_COLOR};`
-        : `fill: ${selectionBoxColor};`}
-    `,
-    leftConstraint: css`
-      ${currentConstraints.horizontal === HorizontalConstraint.Left ||
+        ? {
+            width: '92pt',
+            x: '1085',
+            fill: SELECTED_COLOR,
+          }
+        : {
+            fill: selectionBoxColor,
+          }),
+    }),
+    leftConstraint: css({
+      ...(currentConstraints.horizontal === HorizontalConstraint.Left ||
       currentConstraints.horizontal === HorizontalConstraint.LeftRight
-        ? `height: 92pt; y: 1014; fill: ${SELECTED_COLOR};`
-        : `fill: ${selectionBoxColor};`}
-    `,
-    rightConstraint: css`
-      ${currentConstraints.horizontal === HorizontalConstraint.Right ||
+        ? {
+            height: '92pt',
+            y: '1014',
+            fill: SELECTED_COLOR,
+          }
+        : {
+            fill: selectionBoxColor,
+          }),
+    }),
+    rightConstraint: css({
+      ...(currentConstraints.horizontal === HorizontalConstraint.Right ||
       currentConstraints.horizontal === HorizontalConstraint.LeftRight
-        ? `height: 92pt; y: 1014; fill: ${SELECTED_COLOR};`
-        : `fill: ${selectionBoxColor};`}
-    `,
-    horizontalCenterConstraint: css`
-      ${currentConstraints.horizontal === HorizontalConstraint.Center
-        ? `height: 92pt; y: 1014; fill: ${SELECTED_COLOR};`
-        : `fill: ${selectionBoxColor};`}
-    `,
-    verticalCenterConstraint: css`
-      ${currentConstraints.vertical === VerticalConstraint.Center
-        ? `width: 92pt; x: 1085; fill: ${SELECTED_COLOR};`
-        : `fill: ${selectionBoxColor};`}
-    `,
-    box: css`
-      fill: ${selectionBoxColor};
-    `,
+        ? {
+            height: '92pt',
+            y: '1014',
+            fill: SELECTED_COLOR,
+          }
+        : {
+            fill: selectionBoxColor,
+          }),
+    }),
+    horizontalCenterConstraint: css({
+      ...(currentConstraints.horizontal === HorizontalConstraint.Center
+        ? {
+            height: '92pt',
+            y: '1014',
+            fill: SELECTED_COLOR,
+          }
+        : {
+            fill: selectionBoxColor,
+          }),
+    }),
+    verticalCenterConstraint: css({
+      ...(currentConstraints.vertical === VerticalConstraint.Center
+        ? {
+            width: '92pt',
+            x: '1085',
+            fill: SELECTED_COLOR,
+          }
+        : {
+            fill: selectionBoxColor,
+          }),
+    }),
+    box: css({
+      fill: selectionBoxColor,
+    }),
   };
 };
diff --git a/public/app/plugins/panel/canvas/editor/element/QuickPositioning.tsx b/public/app/plugins/panel/canvas/editor/element/QuickPositioning.tsx
index d3bc421a698..b5772abcc41 100644
--- a/public/app/plugins/panel/canvas/editor/element/QuickPositioning.tsx
+++ b/public/app/plugins/panel/canvas/editor/element/QuickPositioning.tsx
@@ -110,13 +110,13 @@ export const QuickPositioning = ({ onPositionChange, element, settings }: Props)
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  buttonGroup: css`
-    display: flex;
-    flex-wrap: wrap;
-    padding: 12px 0 12px 0;
-  `,
-  button: css`
-    margin-left: 5px;
-    margin-right: 5px;
-  `,
+  buttonGroup: css({
+    display: 'flex',
+    flexWrap: 'wrap',
+    padding: '12px 0 12px 0',
+  }),
+  button: css({
+    marginLeft: '5px',
+    marginRight: '5px',
+  }),
 });
diff --git a/public/app/plugins/panel/canvas/editor/inline/InlineEdit.tsx b/public/app/plugins/panel/canvas/editor/inline/InlineEdit.tsx
index 7149ea5c14e..636d9403178 100644
--- a/public/app/plugins/panel/canvas/editor/inline/InlineEdit.tsx
+++ b/public/app/plugins/panel/canvas/editor/inline/InlineEdit.tsx
@@ -106,43 +106,43 @@ export function InlineEdit({ onClose, id, scene }: Props) {
 }
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  inlineEditorContainer: css`
-    display: flex;
-    flex-direction: column;
-    background: ${theme.components.panel.background};
-    border: 1px solid ${theme.colors.border.weak};
-    box-shadow: ${theme.shadows.z3};
-    z-index: 1000;
-    opacity: 1;
-    min-width: 400px;
-  `,
-  draggableWrapper: css`
-    width: 0;
-    height: 0;
-  `,
-  inlineEditorHeader: css`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: ${theme.colors.background.canvas};
-    border-bottom: 1px solid ${theme.colors.border.weak};
-    height: 40px;
-    cursor: move;
-  `,
-  inlineEditorContent: css`
-    white-space: pre-wrap;
-    padding: 10px;
-  `,
-  inlineEditorClose: css`
-    margin-left: auto;
-  `,
-  placeholder: css`
-    width: 24px;
-    height: 24px;
-    visibility: hidden;
-    margin-right: auto;
-  `,
-  inlineEditorContentWrapper: css`
-    overflow: scroll;
-  `,
+  inlineEditorContainer: css({
+    display: 'flex',
+    flexDirection: 'column',
+    background: theme.components.panel.background,
+    border: `1px solid ${theme.colors.border.weak}`,
+    boxShadow: theme.shadows.z3,
+    zIndex: 1000,
+    opacity: 1,
+    minWidth: '400px',
+  }),
+  draggableWrapper: css({
+    width: 0,
+    height: 0,
+  }),
+  inlineEditorHeader: css({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    background: theme.colors.background.canvas,
+    borderBottom: `1px solid ${theme.colors.border.weak}`,
+    height: '40px',
+    cursor: 'move',
+  }),
+  inlineEditorContent: css({
+    whiteSpace: 'pre-wrap',
+    padding: '10px',
+  }),
+  inlineEditorClose: css({
+    marginLeft: 'auto',
+  }),
+  placeholder: css({
+    width: '24px',
+    height: '24px',
+    visibility: 'hidden',
+    marginRight: 'auto',
+  }),
+  inlineEditorContentWrapper: css({
+    overflow: 'scroll',
+  }),
 });
diff --git a/public/app/plugins/panel/canvas/editor/inline/InlineEditBody.tsx b/public/app/plugins/panel/canvas/editor/inline/InlineEditBody.tsx
index 44d4954ad18..d2b54f88aff 100644
--- a/public/app/plugins/panel/canvas/editor/inline/InlineEditBody.tsx
+++ b/public/app/plugins/panel/canvas/editor/inline/InlineEditBody.tsx
@@ -151,8 +151,8 @@ function getOptionsPaneCategoryDescriptor<T = any>(
 }
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  selectElement: css`
-    color: ${theme.colors.text.secondary};
-    padding: ${theme.spacing(2)};
-  `,
+  selectElement: css({
+    color: theme.colors.text.secondary,
+    padding: theme.spacing(2),
+  }),
 });
diff --git a/public/app/plugins/panel/canvas/editor/layer/TreeNavigationEditor.tsx b/public/app/plugins/panel/canvas/editor/layer/TreeNavigationEditor.tsx
index 1125634dd1d..4bb098903a6 100644
--- a/public/app/plugins/panel/canvas/editor/layer/TreeNavigationEditor.tsx
+++ b/public/app/plugins/panel/canvas/editor/layer/TreeNavigationEditor.tsx
@@ -167,8 +167,8 @@ export const TreeNavigationEditor = ({ item }: StandardEditorProps<any, TreeView
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  addLayerButton: css`
-    margin-left: 18px;
-    min-width: 150px;
-  `,
+  addLayerButton: css({
+    marginLeft: '18px',
+    minWidth: '150px',
+  }),
 });
diff --git a/public/app/plugins/panel/canvas/editor/layer/TreeNodeTitle.tsx b/public/app/plugins/panel/canvas/editor/layer/TreeNodeTitle.tsx
index 26018ec43bf..dd983f1cfc0 100644
--- a/public/app/plugins/panel/canvas/editor/layer/TreeNodeTitle.tsx
+++ b/public/app/plugins/panel/canvas/editor/layer/TreeNodeTitle.tsx
@@ -92,29 +92,29 @@ export const TreeNodeTitle = ({ settings, nodeData, setAllowSelection }: Props)
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  actionButtonsWrapper: css`
-    display: flex;
-    align-items: flex-end;
-  `,
-  actionIcon: css`
-    color: ${theme.colors.text.secondary};
-    cursor: pointer;
-    &:hover {
-      color: ${theme.colors.text.primary};
-    }
-  `,
-  textWrapper: css`
-    display: flex;
-    align-items: center;
-    flex-grow: 1;
-    overflow: hidden;
-    margin-right: ${theme.spacing(1)};
-  `,
-  layerName: css`
-    font-weight: ${theme.typography.fontWeightMedium};
-    color: ${theme.colors.primary.text};
-    cursor: pointer;
-    overflow: hidden;
-    margin-left: ${theme.spacing(0.5)};
-  `,
+  actionButtonsWrapper: css({
+    display: 'flex',
+    alignItems: 'flex-end',
+  }),
+  actionIcon: css({
+    color: theme.colors.text.secondary,
+    cursor: 'pointer',
+    '&:hover': {
+      color: theme.colors.text.primary,
+    },
+  }),
+  textWrapper: css({
+    display: 'flex',
+    alignItems: 'center',
+    flexGrow: 1,
+    overflow: 'hidden',
+    marginRight: theme.spacing(1),
+  }),
+  layerName: css({
+    fontWeight: theme.typography.fontWeightMedium,
+    color: theme.colors.primary.text,
+    cursor: 'pointer',
+    overflow: 'hidden',
+    marginLeft: theme.spacing(0.5),
+  }),
 });