react中报错Failed to set an indexed property on ‘CSSStyleDeclaration‘: Index property setter is not sup

React中LESS样式正确引用
最新推荐文章于 2024-03-22 20:10:37 发布
原创 最新推荐文章于 2024-03-22 20:10:37 发布 · 4.2k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react #reactjs #typescript

本文纠正了在React项目中使用LESS文件时常见的样式声明错误，并展示了正确的元素类名引用方式。

其实这不算是一个问题，是你的一个小疏忽！
在这里插入图片描述
当我们在react中使用less文件书写CSS样式的时候，组件中我们声明页面元素的类名应该写成：

      <Row className={style.mainContainer}></Row>

注： 这个style是我们引入的less文件的别名

      import style from './style.less';

而出现上面的报错是因为你疏忽在行内样式声明里写了元素的类名，如下：

     <Row style={style.mainContainer}></Row>
Vue3 - Arco Design Vue 报错 TypeError: Failed to set an indexed property [0] on ‘CSSStyleDeclaration‘:
🏆 前端领域优质创作者
05-30 5215
vue3，arcodesign，arcodesignvue，组件库，CSSProperties，给组件设置css样式报错，vite，webpack，vue3使用arco.design组件出现报错，TypeError:Failedtosetanindexedproperty[0]on'CSSStyleDeclaration':Indexedpropertysetterisnotsupported.，描述列表Descriptions组件设置label-style，value
Something went wrong: “NotFoundError: Failed to execute ‘removeChild‘ on ‘Node‘: The node to be remo
风口IT猪的成长录
04-17 2211
Something went wrong: "NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node." and the application can't recover.
报错：Failed to set an indexed property on ‘CSSStyleDeclaration‘: Index property setter is not sup
马优晨
03-14 2094
CSSStyleDeclaration异常
react中报错Failed to set an indexed property on 'CSSStyleDeclaration': Index property setter is not sup...
经典鸡翅
11-20 3988
产生这个报错的原因是我当时将样式写到了less文件，我在div中使用的使用应该是使用className = ，而我误写了一个style = 。style里面当然没有自定义的className，所以产生报错，举个例子，你的className叫mycontent，自然style里面不会有的。所以报错，遇到此报错细心查找一下即可。 ...
[ant-design-vue问题] 报错：Failed to set an indexed property on ‘CSSStyle Declaration’
前端
04-23 4765
版本信息如下 报错信息 设置table的字体颜色不能使用style了 ant-design-table: 2.x版本设置属性字体颜色时可以 customRender:({text, record, index, column}) => { const obj = { children: text, props: { rowSpan: record.rowspan, style: `color:red;`
解决 element table表头设置样式报错：Failed to set an indexed property on ‘CSSStyleDeclaration‘: Indexed propert
2301_76707317的博客
07-16 2766
解决 element table表头设置样式报错：Failed to set an indexed property on 'CSSStyleDeclaration': Indexed propert
记一次React线上问题排查
Bazainga的博客
05-09 2627
昨天运营报了一个问题，之前一直正常运行的React项目突然页面访问不了了，通过排查发现页面报错了，错误如下： Uncaught TypeError: Failed to set an indexed property on 'CSSStyleDeclaration': Index property setter is not supported. at Object.setValueFo...
初识React项目遇到的坑（Uncaught ReferenceError: Set is not defined ）
热门推荐
vv_bug
09-28 1万+
**前言：每次在android、rn跟h5中切换的时候，代码总是会闹各种笑话，比如在rn中变量都是包含在“{}”只有一层花括号，但是在vue中“{{}}”会有两层花括号，样式的话rn是驼峰fontSize这种，但在h5中是font-size,然后在android中老喜欢把一个字符串定义为String a=‘123’,/苦笑，说多了都是泪啊，也做了1年多的rn了，总觉得自己react上手应该问题不大...
【React + Antd 教程】Failed to compile. Module not found: Can't resolve 'antd/dist'完美解决
菜鸟的后花园
04-28 1万+
【React + Antd 教程】Failed to compile. Module not found: Can’t resolve 'antd/dist’完美解决 今天在学习React + Antd时 出了个不能编译的报错 Failed to compile. ./src/App.js Module not found: Can't resolve 'antd/dist' in 'G:\***...
vuex报错：Property or method “$store“ is not defined on the instance but referenced during render. Make
qq_46199553的博客
11-02 6345
'store' is defined but never used no-unused-vars
elementPlus el-table在设置:cell-style的时候，报Failed to set an indexed property [0] on ‘CSSStyleDeclaration
qq_26123545的博客
03-22 1361
在使用vue+elementUI-plus，为el-table设置单元格颜色的时候使用到了 :cell-style，但是报错 Failed to set an indexed property [0]
Vue2升级到Vue3及ElementUI升级到ElementPlus常见报错及修复办法
craftsman2020的博客
11-23 4753
原因分析：在、、、等组件中使用了size=“mini"或者不在[”", “default”, “small”, “large”]范围内属性。解决办法：destroyed() 替换为unmounted ()，beforeDestroy()替换为beforeUnmount。解决办法：将替换为解决办法：将tableStyle逻辑中返回的字符串修改为对象。原因分析：因使用了，methods返回字符串样式导致的报错。原因分析：因在中使用导致的报错。
Element-plus相关问题及解决方案
小何又沐风的博客
12-14 2309
前端开发一直在用组件，在使用过程中也遇到了一些问题，在此对问题及解决方案做一个统一的记录，以免遗忘，也便于大家解决相同的问题。
vue脚手架创建项目报错
weixin_44887137的博客
01-21 789
npm创建报错Failed to get response from https://registry.npm.taobao.org/binary-mirror-config 直接执行命令：npm config set strict-ssl false
DOM-6 【兼容】读写样式属性、操作伪元素、运动元素初探
Stephy_Yy
06-06 256
规范 <style type="text/css"></style> <script type="text/javascript"></script> 读写样式属性 .style是访问不到css样式表的，只能访问到行内/内联的属性，当未设置行内属性时，结果为空字符串 设置时，对复合值需要拆解赋值，不拆解效率更低 oDiv.style.weight='200px'; oDiv.style.border='5px solid #000'; // 更合适的
Uncaught SyntaxError: Failed to set the 'innerHTML' property on 'Element'
dragoo1的专栏
04-27 6852
环境：win7 64位,apache,chrome 44.0.2403.125 写了下面一个xhtml文件 abcd 点击链接时报错： Uncaught SyntaxError: Failed to set the 'innerHTML' property on 'Element': The provided markup is
js修改伪元素的属性、styleSheets获取样式表，Failed to read the 'cssRules' property from 'CSSStyleSheet' Cannot acces
苏轻轻的专栏
04-24 1万+
登录验证中的判断逻辑 1.提示输入用户，输入8 - 16位密码2.检验输入用户名和密码是否正确 用户名不允许空格，任何字符数字都行，不允许为空 密码8-16位，不允许空格 ，小于8位给出提示 密码必须包含字母，数字，符号两种 手机号码，11位，只允许数字 效果类似于 想要达成的目的 实现提示时，用的span的伪元素加载背景图片，实现icon...
Failed to set the 'value' property on 'HTMLInputElement': This input element解决办法
ghjzzhg的博客
09-28 9683
这没有从根本解决问题，但这是最快的方法，哪位老铁有更好的方法，请留言： //Just to remove error inside the console. //If error exists then onChange event is not fired. var fileHook = { get: function (elem) { return this.valu
Failed to set an indexed property [14] on 'CSSStyleDeclaration': Indexed property setter is not supported.
最新发布
07-28
在现代浏览器中，`CSSStyleDeclaration` 对象用于表示元素的内联样式或通过样式表应用的样式。然而，该对象并不支持直接设置索引属性（如 `style[0] = 'color: red'`），这会引发错误：`Failed to set an indexed property on 'CSSStyleDeclaration': Indexed property setter is not supported` [^2]。该问题通常出现在某些现代浏览器中，因为它们遵循了更新的 CSS 标准，不再允许对 `CSSStyleDeclaration` 的索引属性进行赋值 [^1]。 ### 常见场景与错误示例 当使用 Vue 或 React 等前端框架时，如果尝试以非标准方式操作 `style` 属性，例如返回字符串而非对象，或者试图通过索引设置样式属性，就可能触发此错误。例如在 Vue + Element UI 的 `el-table` 组件中，使用 `:cell-style` 时返回字符串而不是对象，会导致浏览器报错 [^3]： ```javascript const colCellStyle = (obj) => { if (obj.columnIndex === 1) { return "background:yellow"; // ❌ 错误：返回字符串而非对象 } } ``` ### 正确的使用方式 为了修复该问题，应确保样式属性的设置方式符合规范。在 JavaScript 中，应通过对象形式设置样式，而不是使用索引或字符串形式 [^3]： ```javascript const colCellStyle = (obj) => { if (obj.columnIndex === 1) { return { 'background-color': '#F56C6C' }; // ✅ 正确：返回样式对象 } } ``` 此外，在 JSX 或 React 中，也应避免将 `style` 设置为字符串或其他非对象类型。例如，以下写法是错误的： ```jsx // ❌ 错误写法 <div style={style.name} /> <div className={margin:`${heightCount}`} /> ``` 正确的做法是将 `style` 设置为一个对象： ```jsx // ✅ 正确写法 <div className={style.name} style={{ margin: `${heightCount}` }} /> ``` ### 原因分析 `CSSStyleDeclaration` 的索引属性（如 `style[0]`）原本用于访问样式规则的键名，但在最新浏览器版本中，这些索引属性已被移除 setter 方法，因此无法再通过索引进行赋值 [^2]。开发者应避免依赖这种非标准的写法，而应使用标准的 `style.propertyName` 或 `style.setProperty()` 方法。 ### 建议 - 避免使用 `style[index] = value` 的方式设置样式。 - 在 Vue、React 等框架中，确保 `style` 属性始终是对象形式。 - 使用 `element.style.propertyName` 或 `element.style.setProperty('--prop', value)` 设置样式。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值