Vue3 +Element-Plus el-select下拉菜单样式(局部生效)

下拉框代码

<el-select
            class="buttons-switch-group select-hub"
            :teleported="false"
            style="width: 120px"
            v-model="queryParam.type"
            placeholder="请选择"
            size="mini"
            @change="loadData"
          >
            <el-option label="客运站" value="客运站"></el-option>
            <el-option label="高铁站" value="高铁站"></el-option>
            <el-option label="码头" value="码头"></el-option>
            <el-option label="火车站" value="火车站"></el-option>
            <el-option label="机场" value="机场"></el-option>
          </el-select>

样式穿透

.buttons-switch-group {
  --el-fill-color-blank: rgba(8, 20, 65, 0.3);
  --el-border: 1px solid #073f97;
  --el-text-color-regular: #dedfe4;
}
.select-hub:deep(.el-select__wrapper) {
  min-height: 0.875rem !important;
  min-width: 2rem !important;
  box-shadow: 0 0 0 1px #008cffff inset;
  border-image: linear-gradient(180deg, rgba(28, 173, 255, 1), rgba(0, 140, 255, 1)) 1 1;
}
.select-hub:deep(.el-popper.is-light .el-popper__arrow::before) {
  border: 1px solid #01194d !important;
  background: #01194d !important;
}

.select-hub:deep(.el-popper.is-light) {
  background: #01194d;
  //border: 1px solid #273f70;
}
.select-hub:deep(.el-select-dropdown__item) {
  text-align: left;
  background: #01194d;
  border: none;
  color: #fff;
}