diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinkEditor.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinkEditor.tsx
index 48830432c8a..3bd2ebcc594 100644
--- a/packages/grafana-ui/src/components/DataLinks/DataLinkEditor.tsx
+++ b/packages/grafana-ui/src/components/DataLinks/DataLinkEditor.tsx
@@ -1,8 +1,8 @@
 import React, { ChangeEvent } from 'react';
-import { VariableSuggestion, GrafanaTheme, DataLink } from '@grafana/data';
+import { VariableSuggestion, GrafanaThemeV2, DataLink } from '@grafana/data';
 import { Switch } from '../Switch/Switch';
 import { css } from '@emotion/css';
-import { useStyles } from '../../themes/index';
+import { useStyles2 } from '../../themes/index';
 import { DataLinkInput } from './DataLinkInput';
 import { Field } from '../Forms/Field';
 import { Input } from '../Input/Input';
@@ -15,20 +15,20 @@ interface DataLinkEditorProps {
   onChange: (index: number, link: DataLink, callback?: () => void) => void;
 }
 
-const getStyles = (theme: GrafanaTheme) => ({
+const getStyles = (theme: GrafanaThemeV2) => ({
   listItem: css`
-    margin-bottom: ${theme.spacing.sm};
+    margin-bottom: ${theme.spacing()};
   `,
   infoText: css`
-    padding-bottom: ${theme.spacing.md};
+    padding-bottom: ${theme.spacing(2)};
     margin-left: 66px;
-    color: ${theme.colors.textWeak};
+    color: ${theme.colors.text.secondary};
   `,
 });
 
 export const DataLinkEditor: React.FC<DataLinkEditorProps> = React.memo(
   ({ index, value, onChange, suggestions, isLast }) => {
-    const styles = useStyles(getStyles);
+    const styles = useStyles2(getStyles);
 
     const onUrlChange = (url: string, callback?: () => void) => {
       onChange(index, { ...value, url }, callback);