更改公共组件样式

在日常的组件使用中,我们会用一些公共的ui组件库,虽然这些组件库的功能可能达到了我们的使用需求,但是大部分情况往往是组件样式不符合产品需求样式,这时候往往需要我们自写组件或使用组件提供的其他样式,但是还是会经常出现不能满足需求的情况

本文章提供一个思路

在普通的css中我们可以用>>>来做连接符改更改子组件的样式

.csta >>> .el-cascader-menus{
  background: none;
  color: rgba(255,255,255,1);
}

但是这样的设置实际上过于麻烦了,每个组件的各个样式都需要增加来进行修改,这时候sass提供了一个方法/deet/ 我们可以在sass中使用这个来修改子组件的样式,当然以上两种修改方式都是只对当前设置的页面有效,同时这样也不会修改npm install下载来的组件包,这样在合作开发组件的时候,也不会因为包内组件的修改导致双方显示不相同

/deep/ .el-select{
    position: absolute;
    left: 229px;
    top: 50%;
    width: 184px;
    height: 34px;
    transform: translateY(-50%);
    .el-input{
      width: 184px;
    }
}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值