vue中css样式不生效的原因及解决方式

vue

相信有很多小伙伴入门使用组件库时,设置样式不生效,下面分析一下为什么出现这种问题,以及解决方式
我们在使用vue开发时,在style中加入scoped,这个单词加在当前组件中,是只对当前组件生效,而我们引入的组件库的组件使用时,直接给组件加类名,改变样式是不生效的,因为组件库的组件已经属于咱们的子组件了
解决方式:
先去审查元素


这个是element-ui中的组件,可以看到,".el-input__inner"是他的类名,样式是组件库默认的样式,而修改只需要这样

/deep/深入的意思,给这个类名改变样式,最好给他加个父元素,我这个父元素是search,这样如果页面出现多个同样的组件,不会导致页面样式混乱,改变之后的样式是这样的

以上是 vue中css样式不生效的原因及解决方式 的全部内容, 来源链接: utcz.com/z/375648.html

回到顶部