element-UI样式的修改无效问题/vue中一个组件修改elementui的样式影响全局的elementui的样式
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
·
一、重新给定选择器比如class或者Id选择器,设置的样式无效
原因:
重新给定的选择器设置的样式一些无效,是因为一些样式element-UI已经给定了,给定的这些样式就不能通过选择器来修改样式。没有给定的就可以生效
解决方式:
打开控制台,
然后修改样式,名字以elementui给定的,然后设置 !important。提高权重。就可以了。

找elementui样式的时候,需要慢慢找,因为有一些是包裹在盒子内层的。
二、vue中一个组件修改elementui的样式影响全局组件的elementui的样式
解决方式:
在style标签中加上scoped

通俗理解:scoped就是让style标签内的样式属于单个组件,如果不加上scoped属性,就可能会出现不同组件中,样式名字相同的元素的样式会互相影响。导致布局混乱。
三、当加上scoped之后,会发现第一步样式修改成功之后又失效了
解决方式:
加上深度作用选择器:/deep/ (还有其他的,不过这个我一般使用这个)

至于为什么加上scoped之后,第三方组件的样式会失效的内层原因,大家可以参考这篇博客。
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
1 年前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 1 年前
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐
https://www.cnblogs.com/CyLee/p/10006065.html


所有评论(0)