Vue项目中,子组件的样式设置了scoped之后,一些CSS样式会失效。

原因: 使用 scoped 后,父组件的样式将不会渗透到子组件中。但是一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。

解决方案:
使用深度作用选择器,即 >>> 操作符,或使用 /deep/::v-deep 操作符,后两者都是 >>> 的别名,三者效果一样。

例如:

.my_order_box >>> .el-table .cell {
  text-align: center;
}
.my_order_box >>> .el-table tr td:nth-child(4) .cell {
  text-align: left;
}

或者

.my_order_box /deep/ .el-table .cell {
  text-align: center;
}
.my_order_box /deep/ .el-table tr td:nth-child(4) .cell {
  text-align: left;
}

官网链接:https://vue-loader.vuejs.org/zh/guide/scoped-css.html

Logo

前往低代码交流专区

更多推荐