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

【问题标题】：Using JSX to edit the scale of an inline css element使用 JSX 编辑内联 css 元素的比例
【发布时间】：2021-02-08 11:58:13
【问题描述】：

我正在尝试使用 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 语句放入内联中，表示 if !hovered 然后它会改变大小？

提前谢谢你

【问题讨论】：

这看起来不像 JSX？
完整程序使用JSX，但这里没有实现，有没有办法只使用javascript？或者 JSX 中我可以利用的任何东西？

标签： javascript css jsx transform

【解决方案1】：

您可以将 transform: scale(); 与 css 变量（也称为“自定义属性”）结合使用，然后让 React 更改该变量的值。 Example of transform: scale() with variable.

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

但是，您的问题听起来应该完全使用 CSS 来解决。更改悬停样式是一项非常常见的纯 CSS 任务。

【讨论】：

我之前尝试过使用 elem.style.setProperty 但我收到一个错误并声明它无法编译，我不知道如何解决它
@Alex 请提供您尝试过的代码和确切的错误信息，否则我们无法为您提供帮助。
我尝试了 html: !hoveredStep ？ iconHtml : elem.style.setProperty('iconHtml', '6'), 编译失败，'elem' is not defined no-undef
@Alex elem 是对 DOM 元素的引用，您需要先选择该元素。我真的建议您查看:hover css 伪选择器来解决您的问题。