错误：React 无法识别 DOM 元素上的 allowTransparency 道具

Question

我正在使用 iframe：

<iframe
                width="100%"
                height="100%"
                frameBorder="0"
                title="Spline 3D Animation"
                allowTransparency={true}
                style={{ backgroundColor: "transparent" }}
                src="https://my.spline.design/portfolio-fe0fd4b29cba7bfea175804f995a9f8a/"
></iframe>

控制台显示：

Warning: React does not recognize the `allowTransparency` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `allowtransparency` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

React 版本：^17.0.2

Link 代码示例： 完整的代码在这里 https://github.com/akashshyamdev/portfolio-latest/blob/master/src/containers/Home/Hero.tsx

当前行为

预期行为

我希望黑色背景是透明的

Answer 1

应该是allowtransparency="true"

但是您的 iframe 似乎没有任何 space 透明度

Answer 2

如果 allowtransparency、或 allowTransparency 或任何方法都不起作用，您仍然可以尝试使用 CSS。

iframe {
    background-color: transparent;
}