Canvas: Fix canvas apply styles (#107404)

* fix(canvas): apply styles

* remove deps

public/app/plugins/panel/canvas/utils.ts

@@ -1,5 +1,4 @@
 import { isNumber, isString } from 'lodash';
-import { CSSProperties } from 'react';
 
 import { DataFrame, Field, AppEvents, getFieldDisplayName, PluginState, SelectableValue } from '@grafana/data';
 import appEvents from 'app/core/app_events';
@@ -408,15 +407,14 @@ export function getElementFields(frames: DataFrame[], opts: CanvasElementOptions
   return [...fields];
 }
 
-export function applyStyles(style: React.CSSProperties, target: HTMLDivElement) {
-  let key: keyof CSSProperties;
-  for (key in style) {
-    target.style.setProperty(key, String(style[key]));
-  }
+export function applyStyles(styles: React.CSSProperties, target: HTMLDivElement) {
+  // INFO: CSSProperties can't be applied using setProperty, so we use Object.assign
+  Object.assign(target.style, styles);
 }
 
-export function removeStyles(style: React.CSSProperties, target: HTMLDivElement) {
-  for (const key in style) {
-    target.style.removeProperty(key);
+export function removeStyles(styles: React.CSSProperties, target: HTMLDivElement) {
+  for (const key in styles) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/consistent-type-assertions
+    target.style[key as any] = '';
   }
 }