想要实现elementplus修改组件默认样式且不影响其他页面,可以采用带有scoped的style标签配合/deep/来实现
1.在当前页面新建style标签并加scoped
加了scoped后,不会覆盖elmentplus原有组件的样式,这样不会影响到其他页面。
2. 使用/deep/深度修改样式
样式类名前加/deep/,可以强制修改elmentplus样式
例如:
<style scoped>
/deep/ .el-table .el-table__cell {
padding: 0 0;
}
/deep/ .el-table .el-table__cell >div {
line-height: 36px;
}
.bookable {
color: #19BE6B;
}
.divHover {
background-color:rgba(122, 187, 255, 0.603921568627451);
}
.checkedTd {
background:inherit;
background-color:rgba(64, 158, 255, 1);
border-color:rgba(64, 158, 255, 1);
color: rgb(255, 255, 255);
}
.nonReservable {
color: #EC808D;
}
.notScheduling {
color: #c4c4c4;
}
.reducible {
color: #19BE6B;
margin: 0px 10px;
}
.irreducible {
color: #EC808D;
margin: 0px 10px;
}
</style>