diff --git a/.betterer.results b/.betterer.results
index cbca000cd3b..d20cfea18c1 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -7274,39 +7274,10 @@ exports[`better eslint`] = {
     "public/app/plugins/panel/gauge/GaugeMigrations.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
-    "public/app/plugins/panel/geomap/GeomapOverlay.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/geomap/GeomapPanel.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/geomap/components/DebugOverlay.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
-    ],
     "public/app/plugins/panel/geomap/components/MarkersLegend.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],
       [0, 0, 0, "Do not use any type assertions.", "1"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "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"],
-      [0, 0, 0, "Styles should be written using objects.", "8"],
-      [0, 0, 0, "Styles should be written using objects.", "9"],
-      [0, 0, 0, "Styles should be written using objects.", "10"]
-    ],
-    "public/app/plugins/panel/geomap/components/MeasureOverlay.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, "Unexpected any. Specify a different type.", "2"]
     ],
     "public/app/plugins/panel/geomap/editor/GeomapStyleRulesEditor.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
@@ -7328,15 +7299,7 @@ exports[`better eslint`] = {
     ],
     "public/app/plugins/panel/geomap/editor/StyleRuleEditor.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
-      [0, 0, 0, "Do not use any type assertions.", "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/geomap/globalStyles.ts:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
+      [0, 0, 0, "Do not use any type assertions.", "1"]
     ],
     "public/app/plugins/panel/geomap/layers/basemaps/esri.ts:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
diff --git a/public/app/plugins/panel/geomap/GeomapOverlay.tsx b/public/app/plugins/panel/geomap/GeomapOverlay.tsx
index 0c48318a4a8..d7135e00682 100644
--- a/public/app/plugins/panel/geomap/GeomapOverlay.tsx
+++ b/public/app/plugins/panel/geomap/GeomapOverlay.tsx
@@ -28,29 +28,29 @@ export const GeomapOverlay = ({ topRight1, topRight2, bottomLeft, blStyle }: Ove
 };
 
 const getStyles = (topRight1Exists: boolean) => (theme: GrafanaTheme2) => ({
-  overlay: css`
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    z-index: 500;
-    pointer-events: none;
-  `,
-  TR1: css`
-    right: 0.5em;
-    pointer-events: auto;
-    position: absolute;
-    top: 0.5em;
-  `,
-  TR2: css`
-    position: absolute;
-    top: ${topRight1Exists ? '80' : '8'}px;
-    right: 8px;
-    pointer-events: auto;
-  `,
-  BL: css`
-    position: absolute;
-    bottom: 8px;
-    left: 8px;
-    pointer-events: auto;
-  `,
+  overlay: css({
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    zIndex: 500,
+    pointerEvents: 'none',
+  }),
+  TR1: css({
+    right: '0.5em',
+    pointerEvents: 'auto',
+    position: 'absolute',
+    top: '0.5em',
+  }),
+  TR2: css({
+    position: 'absolute',
+    top: topRight1Exists ? '80px' : '8px',
+    right: '8px',
+    pointerEvents: 'auto',
+  }),
+  BL: css({
+    position: 'absolute',
+    bottom: '8px',
+    left: '8px',
+    pointerEvents: 'auto',
+  }),
 });
diff --git a/public/app/plugins/panel/geomap/GeomapPanel.tsx b/public/app/plugins/panel/geomap/GeomapPanel.tsx
index f9cdad583d3..151192bae4c 100644
--- a/public/app/plugins/panel/geomap/GeomapPanel.tsx
+++ b/public/app/plugins/panel/geomap/GeomapPanel.tsx
@@ -400,15 +400,15 @@ export class GeomapPanel extends Component<Props, State> {
 }
 
 const styles = {
-  wrap: css`
-    position: relative;
-    width: 100%;
-    height: 100%;
-  `,
-  map: css`
-    position: absolute;
-    z-index: 0;
-    width: 100%;
-    height: 100%;
-  `,
+  wrap: css({
+    position: 'relative',
+    width: '100%',
+    height: '100%',
+  }),
+  map: css({
+    position: 'absolute',
+    zIndex: 0,
+    width: '100%',
+    height: '100%',
+  }),
 };
diff --git a/public/app/plugins/panel/geomap/components/DebugOverlay.tsx b/public/app/plugins/panel/geomap/components/DebugOverlay.tsx
index 4cfbba909d7..c30b7a66832 100644
--- a/public/app/plugins/panel/geomap/components/DebugOverlay.tsx
+++ b/public/app/plugins/panel/geomap/components/DebugOverlay.tsx
@@ -7,7 +7,6 @@ import tinycolor from 'tinycolor2';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors/src';
-import { stylesFactory } from '@grafana/ui';
 import { config } from 'app/core/config';
 
 interface Props {
@@ -64,11 +63,11 @@ export class DebugOverlay extends PureComponent<Props, State> {
   }
 }
 
-const getStyles = stylesFactory((theme: GrafanaTheme2) => ({
-  infoWrap: css`
-    color: ${theme.colors.text.primary};
-    background: ${tinycolor(theme.components.panel.background).setAlpha(0.7).toString()};
-    border-radius: 2px;
-    padding: 8px;
-  `,
-}));
+const getStyles = (theme: GrafanaTheme2) => ({
+  infoWrap: css({
+    color: theme.colors.text.primary,
+    background: tinycolor(theme.components.panel.background).setAlpha(0.7).toString(),
+    borderRadius: theme.shape.radius.default,
+    padding: theme.spacing(1),
+  }),
+});
diff --git a/public/app/plugins/panel/geomap/components/MarkersLegend.tsx b/public/app/plugins/panel/geomap/components/MarkersLegend.tsx
index 3abe7e0a6dd..a322627b7fb 100644
--- a/public/app/plugins/panel/geomap/components/MarkersLegend.tsx
+++ b/public/app/plugins/panel/geomap/components/MarkersLegend.tsx
@@ -131,53 +131,54 @@ export function MarkersLegend(props: MarkersLegendProps) {
 }
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  infoWrap: css`
-    display: flex;
-    flex-direction: column;
-    background: ${theme.colors.background.secondary};
-    border-radius: 1px;
-    padding: ${theme.spacing(1)};
-    border-bottom: 2px solid ${theme.colors.border.strong};
-    min-width: 150px;
-  `,
-  layerName: css`
-    font-size: ${theme.typography.body.fontSize};
-  `,
-  layerBody: css`
-    padding-left: 10px;
-  `,
-  legend: css`
-    line-height: 18px;
-    display: flex;
-    flex-direction: column;
-    font-size: ${theme.typography.bodySmall.fontSize};
-    padding: 5px 10px 0;
+  infoWrap: css({
+    display: 'flex',
+    flexDirection: 'column',
+    background: theme.colors.background.secondary,
+    // eslint-disable-next-line @grafana/no-border-radius-literal
+    borderRadius: '1px',
+    padding: theme.spacing(1),
+    borderBottom: `2px solid ${theme.colors.border.strong}`,
+    minWidth: '150px',
+  }),
+  layerName: css({
+    fontSize: theme.typography.body.fontSize,
+  }),
+  layerBody: css({
+    paddingLeft: '10px',
+  }),
+  legend: css({
+    lineHeight: '18px',
+    display: 'flex',
+    flexDirection: 'column',
+    fontSize: theme.typography.bodySmall.fontSize,
+    padding: '5px 10px 0',
 
-    i {
-      width: 15px;
-      height: 15px;
-      float: left;
-      margin-right: 8px;
-      opacity: 0.7;
-      border-radius: ${theme.shape.radius.circle};
-    }
-  `,
-  legendItem: css`
-    white-space: nowrap;
-  `,
-  fixedColorContainer: css`
-    min-width: 80px;
-    font-size: ${theme.typography.bodySmall.fontSize};
-    padding-top: 5px;
-  `,
-  legendSymbol: css`
-    height: 18px;
-    width: 18px;
-    margin: auto;
-  `,
-  colorScaleWrapper: css`
-    min-width: 200px;
-    font-size: ${theme.typography.bodySmall.fontSize};
-    padding-top: 10px;
-  `,
+    i: {
+      width: '15px',
+      height: '15px',
+      float: 'left',
+      marginRight: '8px',
+      opacity: 0.7,
+      borderRadius: theme.shape.radius.circle,
+    },
+  }),
+  legendItem: css({
+    whiteSpace: 'nowrap',
+  }),
+  fixedColorContainer: css({
+    minWidth: '80px',
+    fontSize: theme.typography.bodySmall.fontSize,
+    paddingTop: '5px',
+  }),
+  legendSymbol: css({
+    height: '18px',
+    width: '18px',
+    margin: 'auto',
+  }),
+  colorScaleWrapper: css({
+    minWidth: '200px',
+    fontSize: theme.typography.bodySmall.fontSize,
+    paddingTop: '10px',
+  }),
 });
diff --git a/public/app/plugins/panel/geomap/components/MeasureOverlay.tsx b/public/app/plugins/panel/geomap/components/MeasureOverlay.tsx
index 945bc99a5e0..600b813e8a7 100644
--- a/public/app/plugins/panel/geomap/components/MeasureOverlay.tsx
+++ b/public/app/plugins/panel/geomap/components/MeasureOverlay.tsx
@@ -3,7 +3,7 @@ import Map from 'ol/Map';
 import React, { useMemo, useRef, useState } from 'react';
 
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
-import { Button, IconButton, RadioButtonGroup, Select, stylesFactory } from '@grafana/ui';
+import { Button, IconButton, RadioButtonGroup, Select } from '@grafana/ui';
 import { config } from 'app/core/config';
 
 import { MapMeasure, MapMeasureOptions, measures } from '../utils/measure';
@@ -109,32 +109,33 @@ export const MeasureOverlay = ({ map, menuActiveState }: Props) => {
   );
 };
 
-const getStyles = stylesFactory((theme: GrafanaTheme2) => ({
-  button: css`
-    margin-left: auto;
-  `,
-  icon: css`
-    background-color: ${theme.colors.secondary.main};
-    display: inline-block;
-    height: 19.25px;
-    margin: 1px;
-    width: 19.25px;
-  `,
-  infoWrap: css`
-    color: ${theme.colors.text};
-    background-color: ${theme.colors.background.secondary};
-    border-radius: 4px;
-    padding: 2px;
-  `,
-  infoWrapClosed: css`
-    height: 25.25px;
-    width: 25.25px;
-  `,
-  rowGroup: css`
-    display: flex;
-    justify-content: flex-end;
-  `,
-  unitSelect: css`
-    min-width: 200px;
-  `,
-}));
+const getStyles = (theme: GrafanaTheme2) => ({
+  button: css({
+    marginLeft: 'auto',
+  }),
+  icon: css({
+    backgroundColor: theme.colors.secondary.main,
+    display: 'inline-block',
+    height: '19.25px',
+    margin: '1px',
+    width: '19.25px',
+  }),
+  infoWrap: css({
+    color: `${theme.colors.text}`,
+    backgroundColor: theme.colors.background.secondary,
+    // eslint-disable-next-line @grafana/no-border-radius-literal
+    borderRadius: '4px',
+    padding: '2px',
+  }),
+  infoWrapClosed: css({
+    height: '25.25px',
+    width: '25.25px',
+  }),
+  rowGroup: css({
+    display: 'flex',
+    justifyContent: 'flex-end',
+  }),
+  unitSelect: css({
+    minWidth: '200px',
+  }),
+});
diff --git a/public/app/plugins/panel/geomap/editor/StyleRuleEditor.tsx b/public/app/plugins/panel/geomap/editor/StyleRuleEditor.tsx
index d395569d2b7..3aadfa75656 100644
--- a/public/app/plugins/panel/geomap/editor/StyleRuleEditor.tsx
+++ b/public/app/plugins/panel/geomap/editor/StyleRuleEditor.tsx
@@ -200,23 +200,23 @@ export const StyleRuleEditor = ({ value, onChange, item, context }: Props) => {
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  rule: css`
-    margin-bottom: ${theme.spacing(1)};
-  `,
-  row: css`
-    display: flex;
-    margin-bottom: 4px;
-  `,
-  inline: css`
-    margin-bottom: 0;
-    margin-left: 4px;
-  `,
-  button: css`
-    margin-left: 4px;
-  `,
-  flexRow: css`
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-  `,
+  rule: css({
+    marginBottom: theme.spacing(1),
+  }),
+  row: css({
+    display: 'flex',
+    marginBottom: '4px',
+  }),
+  inline: css({
+    marginBottom: 0,
+    marginLeft: '4px',
+  }),
+  button: css({
+    marginLeft: '4px',
+  }),
+  flexRow: css({
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+  }),
 });
diff --git a/public/app/plugins/panel/geomap/globalStyles.ts b/public/app/plugins/panel/geomap/globalStyles.ts
index 6b43228b50f..56b1eb9d302 100644
--- a/public/app/plugins/panel/geomap/globalStyles.ts
+++ b/public/app/plugins/panel/geomap/globalStyles.ts
@@ -46,39 +46,39 @@ export function getGlobalStyles(theme: GrafanaTheme2) {
   //   border: 2px dotted rgba(0,60,136,0.7);
   // }
 
-  return css`
-    .ol-scale-line {
-      background: ${theme.colors.border.weak}; // rgba(0,60,136,0.3);
-    }
-    .ol-scale-line-inner {
-      border: 1px solid ${theme.colors.text.primary}; // #eee;
-      border-top: 0px;
-      color: ${theme.colors.text.primary}; //  #eee;
-    }
-    .ol-control {
-      background-color: ${theme.colors.background.primary}; //rgba(255,255,255,0.4);
-    }
-    .ol-control:hover {
-      background-color: ${theme.colors.background.secondary}; // rgba(255,255,255,0.6);
-    }
-    .ol-control button {
-      color: ${theme.colors.secondary.text}; // white;
-      background-color: ${theme.colors.secondary.main}; // rgba(0,60,136,0.5);
-    }
-    .ol-control button:hover {
-      color: ${theme.colors.secondary.text};
-      background-color: ${theme.colors.secondary.shade}; // rgba(0,60,136,0.5);
-    }
-    .ol-control button:focus {
-      color: ${theme.colors.secondary.text};
-      background-color: ${theme.colors.secondary.main}; // rgba(0,60,136,0.5);
-    }
-    .ol-attribution ul {
-      color: ${theme.colors.text.primary}; //  #000;
-      text-shadow: none;
-    }
-    .ol-attribution:not(.ol-collapsed) {
-      background-color: ${theme.colors.background.secondary}; // rgba(255,255,255,0.8);
-    }
-  `;
+  return css({
+    '.ol-scale-line': {
+      background: theme.colors.border.weak, // rgba(0,60,136,0.3);
+    },
+    '.ol-scale-line-inner': {
+      border: `1px solid ${theme.colors.text.primary}`, // #eee;
+      borderTop: 0, // 0px;
+      color: theme.colors.text.primary, //  #eee;
+    },
+    '.ol-control': {
+      backgroundColor: theme.colors.background.primary, // rgba(255,255,255,0.4);
+    },
+    '.ol-control:hover': {
+      backgroundColor: theme.colors.background.secondary, // rgba(255,255,255,0.6);
+    },
+    '.ol-control button': {
+      color: theme.colors.secondary.text, // white;
+      backgroundColor: theme.colors.secondary.main, // rgba(0,60,136,0.5);
+    },
+    '.ol-control button:hover': {
+      color: theme.colors.secondary.text,
+      backgroundColor: theme.colors.secondary.shade, // rgba(0,60,136,0.5);
+    },
+    '.ol-control button:focus': {
+      color: theme.colors.secondary.text,
+      backgroundColor: theme.colors.secondary.main, // rgba(0,60,136,0.5);
+    },
+    '.ol-attribution ul': {
+      color: theme.colors.text.primary, //  #000;
+      textShadow: 'none',
+    },
+    '.ol-attribution:not(.ol-collapsed)': {
+      backgroundColor: theme.colors.background.secondary, // rgba(255,255,255,0.8);
+    },
+  });
 }