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;
}