修改element ui 的样式 global不生效
之前修改antd组件库的样式，可以用global修改
:global {
.ant-form-item-label {
width: 190px;
}
.ant-form-item-control-input {
width: 548px;
}
.ant-select:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input)
.ant-select-selector {
border-color: #dce8f9;
box-shadow: #dce8f9;
}
}
但是在修改element ui的样式，用global竟然不生效诶。
如何修改element ui 的样式？
答：用样式穿透
CSS 样式穿透的三种方式
1. >>>
外层容器 >>> 组件 { } // stylus && less
2./deep/
外层容器 /deep/ 组件 { } // less
3.::v-deep
外层容器 ::v-deep 组件 { } // scss
我参与的项目中用的是scss
示例：修改element ui table表的样式
// 除了倒数第二个td元素，其他td元素的border-right都去掉
.table ::v-deep tbody td:not(:nth-last-child(2)) {
border-right: none;
}
.table ::v-deep thead th:not(:nth-last-child(2)) {
border-right: none;
}
使 element ui的表格变成这样子
注意：vue3.0 中使用 会提示 ::v-deep 组件 { } 已经被弃用，
需要使用:deep()来代替文章来源：https://www.toymoban.com/news/detail-483512.html
::v-deep usage as a combinator has been deprecated. Use
:deep() instead.文章来源地址https://www.toymoban.com/news/detail-483512.html
.versionTable :deep(tbody td:not(:nth-last-child(2))) {
border-right: none;
}
.versionTable :deep(thead th:not(:nth-last-child(2))) {
border-right: none;
}
到了这里，关于VUE3 修改element ui 的样式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
