Using JSX to edit the scale of an inline css element

Question

I am attempting to animate an element increasing in size using JSX and inline CSS

const iconHtml = `<div style="background: url('${iconUrl}'); width: 100%; height: 100%; transition: 0.5s; background-repeat: round; transform: scale(4);"onmouseover="this.style.scale=2;"onmouseout="this.style.scale=1;"" >
     <p style="margin-bottom: 0;position: relative;left: 70px;width: max-content;top: 20px;font-size: 16px; font-weight: 600;>
            ${steps?.length < 10 ? item.title : ""}
     </p>
  </div>`;
const icon = L.divIcon({
  html: !hovered ? iconHtml : iconHtml,
});

currently, I am trying to add a new if statement at the placeholder of HTML: ?hovered: iconHtml :iconHtml , and have tried different ways such as iconHtml.style.scale however it continues to give me errors. Is there any way to use javascript to change the size of the item in an if statement outside of the inline CSS? if not is there a way to put an if statement into the inline that says if !hovered then it changes the size?

thank you in advance

Answer 1

You could use the transform: scale(); in combination with a css variable (also called "custom properties"), and then let React change that variable's value. Example of transform: scale() with variable .

Programmatically changing a css variable's value works like this: elem.style.setProperty('--my-var-name', 'valueGoesHere'); .

However, your problem sounds like it should be solved purely with CSS. Changing a style on hover is a super common pure css task.