From 390556e23ca7743a6dd65368cfcbfca33fe26e2d Mon Sep 17 00:00:00 2001
From: Ihor Yeromin <yeryomin.igor@gmail.com>
Date: Mon, 30 Jun 2025 17:24:26 +0200
Subject: [PATCH] Canvas: Fix canvas apply styles (#107404)

* fix(canvas): apply styles

* remove deps
---
 public/app/plugins/panel/canvas/utils.ts | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/public/app/plugins/panel/canvas/utils.ts b/public/app/plugins/panel/canvas/utils.ts
index ea77dfe565f..80b83e5415e 100644
--- a/public/app/plugins/panel/canvas/utils.ts
+++ b/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] = '';
   }
 }