修改elementui(饿了么)button(按钮)is-disabled的样式影响其他例如输入框disabled的样式

// 如果直接写一个全局样式的话,直接写成如下,所有组件的禁用样式都会受影响力

.is-disabled{

        background-color: pink;

}

// 比如输入框加一个:disabled='true',那输入框的背景色就会变成粉色,必须添加作用域才可以,比如外面嵌套一个带类名的div

// html

<div class='ipt-warp'>

        <el-input :disabled='true'  />

</div>

<div class='btn-warp'>

        <el-button type='primary' :disabled='true'  />

</div>

// 样式部分

<style lang='less' scoped>

/deep/ .btn-warp{

        .is-disabled{

                background-color: pink

        }

}

// ⚠️⚠️⚠️⚠️⚠️⚠️可以这么写更改el-button的样式

// 主要是这里 注意.el-button--primary和.is-disabled之间没有空格

.el-button--primary.is-disabled{

        background-color: #333

        // 或者修改hover active等

        &:hover{

                background-color: #ddd

        }

}

// 同理其他按钮类型可以写 .el-button--danger.is-disabled{ ...样式 }

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值