vue elementui 部分样式无效的解决方法记录
问题如下:
<el-form-item class="btns">
<el-button type="primary"
@click="login">登录</el-button>
<el-button type="info"
@click="resetLoginForm">重置</el-button>
</el-form-item>
.btns{
display: flex;
justify-content: space-around;
padding: 0;
}
实际效果并没有达到预期。
通过浏览器检查元素发现,我定义css底下还有一个div
所以只需要将代码改为
//这是vue-cli 3.0及以上的改发
.btns ::v-deep .el-form-item__content {
display: flex;
justify-content: space-around;
padding: 0;
}
//这是低版本的改发
.btns /deep/ .el-form-item__content {
display: flex;
justify-content: space-around;
padding: 0;
}
结果: