el-select のスタイルを変更する方法の詳細な説明: popper-append-to-body と popper-class

<el-選択
    :popper-append-to-body="false"
    v-model="タスクタイプ"
    placeholder="選択してください"
    サイズ="ミニ"
    クラス="select-style"
    ポッパークラス="select-popper"
  >
    <el-オプション
      v-for="(item,index) in taskTypes"
      :key="インデックス"
      :value="アイテムの値"
      :label="アイテム.ラベル"
    </el-option>
  </el-select>

.select-style {
    幅: 3rem;
    右マージン: 0.36rem;
    /deep/.el-input__inner {
      左上の境界線の半径: 0;
      境界線の左下の半径: 0;
      境界線: 1px実線 #a1a3ad;
      左境界線の幅: 0;
      背景色: rgba(0, 0, 0, 0.8);
      フォントファミリ: PingFangSC-Regular;
      フォントサイズ: 0.28rem;
      色: rgba(255, 255, 255, 0.6);
    }
  }

/deep/.select-popper {
    背景色: $item-bg-color;
    境界線の半径: 0.08rem;
    境界線: 実線 0.02rem #1c395d;
    フォントファミリ: PingFangSC-Regular;
    .el-select-dropdown__item.selected {
      フォントファミリ: PingFangSC-Regular;
      フォントサイズ: 0.28rem;
      色: rgba(74, 141, 253, 1);
    }
    li {
      色: #fff;
      背景: 透明;
      色: #fff;
      フォントサイズ: 0.28rem;
    }
    .el-select-dropdown__item:hover,
    .el-select-dropdown__item.hover {
      背景色: rgba(110, 147, 206, 0.2);
      右マージン: 1px;
    }
    .popper__arrow::after {
      下部の境界線の色: $item-bg-color;
    }
    .ポッパー__矢印{
      下部の境界線の色: $item-bg-color;
    }
    .el-select-dropdown__empty {
      パディング: 0.2rem;
      フォントサイズ: 0.28rem;
    }
  }