vue中css样式不生效的原因及解决方式
相信有很多小伙伴入门使用组件库时,设置样式不生效,下面分析一下为什么出现这种问题,以及解决方式我们在使用vue开发时,在style中加入scoped
·
相信有很多小伙伴入门使用组件库时,设置样式不生效,下面分析一下为什么出现这种问题,以及解决方式
我们在使用vue开发时,在style中加入scoped,这个单词加在当前组件中,是只对当前组件生效,而我们引入的组件库的组件使用时,直接给组件加类名,改变样式是不生效的,因为组件库的组件已经属于咱们的子组件了
解决方式:
先去审查元素
这个是element-ui中的组件,可以看到,".el-input__inner"是他的类名,样式是组件库默认的样式,而修改只需要这样
/deep/深入的意思,给这个类名改变样式,最好给他加个父元素,我这个父元素是search,这样如果页面出现多个同样的组件,不会导致页面样式混乱,改变之后的样式是这样的
基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。
更多推荐
8
0- 0
已为社区贡献1条内容
所有评论(0)