【问题标题】:Failed to set an indexed property on 'CSSStyleDeclaration': Index property setter is not supported无法在“CSSStyleDeclaration”上设置索引属性:不支持索引属性设置器
【发布时间】:2019-09-15 22:31:39
【问题描述】:

当 chrome 版本更新到 74(最新版本)时,我的 react 项目出现上述错误。

【问题讨论】:

  • 你找到解决办法了吗?
  • 嗨,你是怎么解决这个问题的?
  • 当我将组件从内联样式重构为类名时会发生这种情况,但忘记更新属性。例如style={{ color: 'red'}}style={styles.red_color} 而不是 className={styles.red_color}

标签: css google-chrome react-dom


【解决方案1】:

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

之前:

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

之后:

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

我认为你可以对 React 进行同样的尝试。

【讨论】:

  • 谢谢,我在使用 ngx-avatar 时遇到了同样的问题
【解决方案2】:

here 描述了此问题的根本原因。本质上,当您将某些元素的style 属性传递为stringarray 时,就会发生这种情况。喜欢style="string"style={[array]}。这似乎无关紧要(我不认为有人故意尝试将stringArray 发送到style 属性),但在我的情况下这是根本原因。

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

以下是我的错误示​​例

我使用扩展运算符...spacing.xxSmall 错误地设置了styles.radioButton(用作某些元素的style 属性的值),但spacing.xxSmall 只是一个字符串并以字符作为数组成员传播到数组。以前索引 (0, 1, 2, ...) 为 style 的属性已被忽略,但现在站点已被粉碎。

【讨论】:

    【解决方案3】:

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

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

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

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

    如果是由于上述原因,只需将道具名称从“样式”更改为“listSectionStyle”(或您选择的任何内容)即可解决。

    Fyodor 在回复中分享的参考:link 有助于理解真正的问题。

    【讨论】:

    • 在我的例子中,同样对于一个 RN Web Expo 项目,问题是在已经设置样式的导入组件上使用 styled()。在同一个文件中进行继承不会导致错误。我怀疑当它们位于单独的文件中时,它使用字符串来设置样式属性,这是您链接到的问题。
    【解决方案4】:

    我在使用 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>
    

    【讨论】:

      猜你喜欢
      • 2018-03-14
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-10-06
      • 2021-12-29
      • 1970-01-01
      • 2013-09-15
      • 1970-01-01
      相关资源
      最近更新 更多