使用 JSX 编辑内联 css 元素的比例

Question

我正在尝试使用 JSX 和内联 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,
});

目前，我正在尝试在HTML: ?hovered: iconHtml :iconHtml的占位符处添加一个新的 if 语句，并尝试了不同的方法，例如 iconHtml.style.scale 但是它继续给我错误。 有没有办法使用 javascript 在内联 CSS 之外的 if 语句中更改项目的大小？ 如果没有，有没有办法将 if 语句放入内联中，如果!hovered那么它会改变大小？

先感谢您

Answer 1

您可以使用transform: scale(); 结合 css 变量（也称为“自定义属性”），然后让 React 更改该变量的值。 变换示例：带有变量的 scale() 。

以编程方式更改 css 变量的值的工作方式如下： elem.style.setProperty('--my-var-name', 'valueGoesHere'); .

但是，您的问题听起来应该完全使用 CSS 来解决。 在 hover 上更改样式是一个超级常见的纯 css 任务。