无法在“ CSSStyleDeclaration”上设置索引属性：不支持索引属性设置器

Question

当chrome版本更新到74（最新版本）时，我的React项目中出现错误。

Answer 1

我使用Angular库工作，其中一些库现在不支持内联样式（对我来说，它是ngx-avatar，在Firefox和chrome上不起作用：74）

之前：

<ngx-avatar style="border-radius="50%"></ngx-avatar>

之后：

<ngx-avatar [style.border-radius]="'50%'"></ngx-avatar>

我认为您可以对React尝试相同的操作。

Answer 2

here说明了此问题的根本原因。本质上，当您将某些元素的style属性传递为string或array时，就会发生这种情况。像style="string"或style={[array]}。这似乎无关紧要（我不认为有人故意将string或Array发送到style属性），但在我看来，这是根本原因。

要查找错误，建议您在Chrome或其他浏览器中使用调试器仔细检查代码。

以下是我的错误示​​例

我使用扩展运算符styles.radioButton错误地设置了style（用作某些元素的...spacing.xxSmall属性的值），但是spacing.xxSmall只是一个字符串，并扩展为以char作为数组成员的数组。以前索引（{0，1，2，...）为style的属性已被忽略，但现在站点已被压缩。

Answer 3

在我的 RN Expo Web 应用程序中，我在执行类似操作时遇到此错误

style={{ padding: 5, ...props.style }}

我意识到传递名为“style”的道具然后将其用作内联样式会导致此错误。为我解决的是为道具使用不同的名称并执行类似...

style={{ padding: 5, ...props.listSectionStyle }}

如果由于上述原因，只需将道具名称从“style”更改为“listSectionStyle”（或您选择的任何一个）之类的名称即可解决。

参考：link 由 Fyodor 在他的回复中分享，有助于了解真正的问题。

Answer 4

我在使用 prime ng 的 <p-skeleton> 时遇到了这个错误。我正在做的是将样式直接传递给骨架，如下所示：

<p-skeleton width="97.5%" height="20rem" style="margin-bottom: 2rem;"></p-skeleton>

因此，我没有直接使用样式，而是使用 class 属性来设置边距底部（我的类已经定义）。 这为我消除了错误。更新的行如下：

<p-skeleton width="97.5%" height="20rem" borderRadius="16px" class="mb-40"></p-skeleton>