vue 中css样式穿透
问题由来当在两个子组件中引入时,header 中并未编辑样式,footer写了自己的样式,因为同有一个main的class,所以,在渲染时生成的全局的样式,header组件也捡了footer的便宜,但是,项目中我们不希望看到这样的效果,我们想要在组件作用域内的样式。代码截图效果解决办法在 style 添加一属性 scoped, 生成组件作用域内的 CSS如此,这样就各个组件就可以...
·
问题由来
当在两个子组件中引入时,header 中并未编辑样式,footer写了自己的样式,因为同有一个main的class,所以,在渲染时生成的全局的样式,header组件也捡了footer的便宜,但是,项目中我们不希望看到这样的效果,我们想要的是组件作用域内的样式。
代码截图
效果
解决办法
在 style 添加一属性 scoped, 生成组件作用域内的 CSS
如此,这样就各个组件就可以写各自的样式而不互相污染了,
引入其他插件时的样式穿透
具体写法
/* 父元素 /deep/ 插件元素*/
.parent /deep/ .swiper-silder{
width: 30px;
}
更多推荐
已为社区贡献8条内容
所有评论(0)