问题由来

当在两个子组件中引入时,header 中并未编辑样式,footer写了自己的样式,因为同有一个main的class,所以,在渲染时生成的全局的样式,header组件也捡了footer的便宜,但是,项目中我们不希望看到这样的效果,我们想要的是组件作用域内的样式。

代码截图
在这里插入图片描述
效果
在这里插入图片描述

解决办法

在 style 添加一属性 scoped, 生成组件作用域内的 CSS
在这里插入图片描述
如此,这样就各个组件就可以写各自的样式而不互相污染了,
在这里插入图片描述

引入其他插件时的样式穿透

具体写法

 /* 父元素  /deep/  插件元素*/
 .parent /deep/ .swiper-silder{
    width: 30px;
}
Logo

前往低代码交流专区

更多推荐