修改第三方组件库（例：element-plus）样式的万能方法（小白看这里）。

前言

       开发中总是会用到第三方组件库，虽然封装了功能确实好用，但是却牺牲了一部分自定义样式。以element为例，我个人不太喜欢用这个组件，因为他高度封装化，就让它自定义样式变得非常困难且繁琐，尤其是对于前台开发。但耐不住功能确实多，开发后台时他就是首选，在开发前台时也会有人用。在此我总结了修改样式的整体流程和思路，我会演示一遍流程，对于其他第三方组件库也同样适用。

步骤

1.明确要修改的样式名

• 以element-plus的表单组件为例，我新建了一个空页面，里面只有一个简单的表单，我们尝试修改表单验证时的提示文字样式（我想这个需求足够小众了）。

•   打开控制台，把鼠标移到要修改的元素上

• 随便在控制台的样式上修改一下，如元素发生相应的变化，就说明拿到了对的元素类名。此处获取到了样式的类名 .el-form-item__error

2. 在style中使用深度样式修改

• 比如我想修改它的颜色名和内边距

::v-deep .el-form-item__error {
    //如确认找到的样式类名无误但是不生效，可能是原样式写在了html标签中，此时请在样式后加!important提升样式优先级
    color: skyblue; 
    padding: 0;
  }

• 可以在右边的样式查看中看到原本的样式已经被覆盖，效果展示：

3. 修改响应样式(:hover,:active)

       对于修改响应样式也是一样的步骤，只不过可能需要强制元素状态来阻止样式名消失。

 

3. 上述示例源码

无论是vue还是别的框架，因只涉及到样式修改，所以此步骤通用。

<template>
    <div class="demo2">
        <el-form ref="formRef" :model="queryParams" label-width="auto" :rules="rules">
            <el-form-item label="所属地区：" prop="report_content">
                <el-input v-model="queryParams.report_content" size="small" />
            </el-form-item>
            <el-form-item label="主体：" prop="report_person">
                <el-input v-model="queryParams.report_person" size="small" />
            </el-form-item>
            <el-form-item label="链接：" prop="report_file">
                <el-input v-model="queryParams.report_file" size="small" />
            </el-form-item>
            <el-form-item label="电话：" prop="report_phone">
                <el-input v-model="queryParams.report_phone" size="small" />
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
let rules = reactive({
    dept_name: [{
        equired: true, message: "请输入所属地区", trigger: "blur"
    }],
    report_content: [{
        required: true,
        message: '请输入内容',
        trigger: 'blur',
    }],
    report_person: [{
        required: true,
        message: '请输入创建者人',
        trigger: 'blur',
    }],
    report_phone: [{
        required: true,
        message: '请输入正确的电话',
        trigger: 'blur',
    }, { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' }],
});
let queryParams = reactive({
    report_content: "",
    report_person: "",
    report_file: "",
    report_phone: ""

})
</script>

<style scoped>
.demo2 {
    border: 1px solid black;
    padding: 10px;
    border-radius: 10px;
}

::v-deep .el-form-item__error {
    color: skyblue;
    padding: 0;
}

::v-deep .el-input__wrapper.is-focus {
    box-shadow: 0 0 0 1px purple;
}
</style>