mint ui修改组件样式

最新推荐文章于 2020-08-16 11:32:45 发布

原创最新推荐文章于 2020-08-16 11:32:45 发布 · 921 阅读

0 ·

CC 4.0 BY-SA版权

菜鸡日记同时被 2 个专栏收录

44 篇文章

订阅专栏

vue

31 篇文章

订阅专栏

本文详细解析Vue中样式深潜(deep)的使用方法，介绍如何在scoped样式中覆盖组件内部样式，确保子组件样式正确应用。通过具体示例，讲解如何设置搜索栏样式，包括背景颜色、内边距及输入框透明背景等。

/deep/

.search-bar {
		height: 60px;
		box-sizing: border-box;
		& /deep/ .mint-searchbar { /*因为style中加了scoped，这里不加deep时无法正常作用*/
			background: #fff;
			padding: 5px 10px;
			.mint-searchbar-inner {
				background: #f2f2f2;
				input {
					background: transparent;
				}
			}
		}
		.mint-searchbar-inner {
				background: #f2f2f2;
				input {
					background: transparent;
				}
			}
	}