scoped导致样式修改失败

深入理解Vue中scoped样式及/deep/使用

最新推荐文章于 2024-02-02 22:00:00 发布

原创最新推荐文章于 2024-02-02 22:00:00 发布 · 362 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

web前端专栏收录该内容

13 篇文章

订阅专栏

本文详细解析了Vue项目中scoped样式的局限性与/deep/选择器的作用，阐述如何通过/deep/重写组件内部样式，解决样式覆盖难题，提升页面布局的灵活性与美观性。

为了避免全局污染，当前页面样式一般都回会加上scoped属性，但有时候重写组件样式会不生效，此时再需要修改的代码前面加上/deep/即可(切记后面不要有空格，紧跟选择器)，具体入下面代码所示

<style lang="scss" scoped>
    .report-index-box{

		/deep/.selectName {
			padding: 0 1vw;
			font-size: 1vw;
			color: #606266;
		}
		/deep/.selectMain {
			padding:24px 0;
		}
		/deep/.el-table th.is-leaf {
			height: 50px!important;
			background: #F8F8F9!important;
		}
		/deep/.el-table__fixed {
			height:auto!important;
			bottom: 17px!important;
		}
		/deep/.el-table__fixed-body-wrapper{
			height:auto!important;
			bottom: 0px!important;
		}
	}
</style>