vue3中覆盖组件样式的方法

在前端设计时，遇到时间框组件el-date-picker的样式需要单独覆盖掉

如覆盖如下实施日期的时间框边框

<template>
     <el-dialog :title="text" v-model="open" width="80%" destroy-on-close>
        <div class="dialog-box">
          <el-scrollbar>
            <el-form :model="importList" :rules="importRules" ref="userRef" label-width="80px">
              <el-row>
            <el-col>
            <el-table v-loading="loading" :data="importList" >
               <!-- <el-table-column type="selection" width="50" align="center" /> -->
               <!-- <el-table-column label="编号" align="center" key="userId" prop="userId" /> -->
               <el-table-column label="标准名称" align="center" key="name" prop="name"  :show-overflow-tooltip="true" />
               <el-table-column label="标准(级别)类型" align="center" key="sandardLevel" prop="sandardLevel" />
               <el-table-column label="标准号/计划号" align="center" key="resultsLabel" prop="resultsLabel" />
               <el-table-column label="起草单位" align="center" key="affiliation" prop="affiliation" />
               <el-table-column label="起草人" align="center" key="relatedPersonnel" prop="relatedPersonnel" />
               <el-table-column label="前言" align="center" key="preface" prop="preface" />
               <el-table-column label="(适用)应用范围" align="center" key="applicationRange" prop="applicationRange" />
               <el-table-column label="发(下达)日期" align="center" prop="outputTime" width="160">
                  <template #default="scope">
                     <!-- <span>{{ parseTime(scope.row.outputTime)}}</span> -->
                     <!-- <el-input v-model="scope.row.outputTime" /> -->
                    <el-date-picker
                      v-model="scope.row.outputTime"
                      format="YYYY-MM-DD"
                      value-format="YYYY-MM-DD"
                      type="date"
                      disabled
                      style="width:100%"
                    />
                  </template>
               </el-table-column>
               <el-table-column label="实施日期" align="center" prop="implementationDate" width="160">
                  <template #default="scope">
                     <!-- <span>{{ parseTime(scope.row.implementationDate) }}</span> -->
                     <el-date-picker
                      v-model="scope.row.implementationDate"
                      format="YYYY-MM-DD"
                      value-format="YYYY-MM-DD"
                      type="date"
                      prefix-icon="former"
                      readonly
                      style="width:100%;"
                    />
                  </template>
               </el-table-column>

               <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
                  <template #default="scope">
                     <el-tooltip content="删除" placement="top" v-if="scope.row.id !== 1">
                        <el-button link type="primary" icon="Delete" @click="handleImportDelete(scope.row,scope)" ></el-button>
                     </el-tooltip>
                  </template>
               </el-table-column>
            </el-table>
            <pagination
               v-show="import_total > 0"
               :total="import_total"
               v-model:page="import_params.pageIndex"
               v-model:limit="import_params.pageSize"
               @pagination="getImportList"
            />
            </el-col>
          </el-row>
            </el-form>
          </el-scrollbar>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <div>
              <el-button @click="open = false">取消</el-button>
              <el-button type="primary" @click="submitImport">
                确定
              </el-button>
            </div>
          </span>
        </template>
      </el-dialog>
</template>

直接在页面style中写样式，覆盖不了，就算加上!important也不行

<style lang="scss" scoped>
.el-input__wrapper){

display:contents !important;

}

</style>

解决方法是使用 ::v-deep 含义是-样式穿透可覆盖组件样式

/**::v-deep 含义-样式穿透可覆盖组件样式 */

::v-deep(.el-input__wrapper) {

display:contents !important;

}

注意：

"::v-deep"是Vue.js框架中的一个特殊选择器，用于在样式中深度选择子组件的元素。在Vue组件中，通常只能通过父组件的样式来影响子组件的样式，但是有时候我们需要直接影响子组件内部的元素样式，这时就可以使用"::v-deep"选择器。

使用"::v-deep"选择器时，可以在样式中直接使用子组件的类名或标签名来选择子组件内部的元素，而不受父组件的样式影响。这样可以更灵活地控制子组件内部元素的样式。

需要注意的是，"::v-deep"选择器只在使用了CSS预处理器（如Sass、Less等）的情况下才有效，因为它是预处理器提供的功能。

希望以上介绍对您有帮助！如果还有其他问题，请随时提问。