VUE3 修改element ui 的樣式

修改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()來代替

::v-deep usage as a combinator has been deprecated. Use

:deep() instead.

.versionTable :deep(tbody td:not(:nth-last-child(2))) {
  border-right: none;
}

.versionTable :deep(thead th:not(:nth-last-child(2))) {
  border-right: none;
}