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

Question

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

Answer 1

这里描述了这个问题的根本原因。本质上，当您将某些元素的

style

属性作为

string

或

array

传递时，就会发生这种情况。像

style="string"

或

style={[array]}

。这似乎不相关（我不认为有人故意尝试将

string

或

Array

发送到

style

财产），但在我的情况下，这是根本原因。

为了发现错误，我建议使用 Chrome 或其他浏览器中的调试器仔细调查您的代码。

以下是我的错误示例

我使用展开运算符

styles.radioButton

错误地设置了

style

（用作某些元素的

...spacing.xxSmall

属性的值），但是

spacing.xxSmall

只是一个字符串并以字符作为数组成员展开到数组。以前索引（0、1、2、...）为

style

的属性已被忽略，但现在网站被压碎了。

Answer 2

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

之前：

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

之后：

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

我想你可以对 React 做同样的尝试。

Answer 3

在我的RN Expo Web应用程序中，我在做类似的事情时遇到了这个错误

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

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

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

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

参考：费奥多尔在他的回复中分享的链接有助于理解真正的问题。

Answer 4

世博会/RN

您可能以这种方式提供了一系列格式错误的样式表：

<compo style={[foo, biz, bar]} />

你需要做的是扁平化你的样式表：

import * as Native from 'react-native';

<compo style={Native.StyleSheet.flatten([foo, biz, bar])} />

Answer 5

我在使用 prime ng 的

<p-skeleton>

时遇到了这个错误。我正在做的是将样式直接传递给骨架，如下所示：

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

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

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

Answer 6

我在 Next.js 中遇到了同样的错误。我使用 style={style.cardImg } 而不是 className= {style.cardImg}

所以，将 style={} 替换为 className={}