修改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表的樣式
// 除了倒數(shù)第二個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 組件 { } 已經(jīng)被棄用，
需要使用:deep()來代替文章來源：http://www.zghlxwxcb.cn/news/detail-483512.html
::v-deep usage as a combinator has been deprecated. Use
:deep() instead.文章來源地址http://www.zghlxwxcb.cn/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;
}
到了這里，關(guān)于VUE3 修改element ui 的樣式的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
