修改elmentUI中组件的样式

╰+哭是因爲堅強的太久メ 2024-03-24 16:31 94阅读 0赞

## 背景知识 ##

在用vue+elmentUI写页面时想对部分组件的样式进行自定义，故成此文

## 步骤一、元素定位 ##

**思路：**

*  修改一个元素前必然要找到该元素所在的类；
 *  elmentUI在项目编译结束后会自动生成额外的类；
 *  只要找到组件编译后的类名即可

**举例：**修改一个带校验功能的输入框的提示文本颜色

**修改前**的效果如下：

![6b0e1049df9942f1a2f42e326f0575e1.png][]

附上部分源码如下：

<el-form :rules="rules" ref="form" :model="loginForm" class="loginContainer">
        <el-form-item prop="code">
            <el-input type="text" auto-complete="false" v-model="loginForm.code" placeholder="点击图片更换验证码" style="width:220px;margin-right: 5px;"></el-input>
        </el-form-item>
    </el-form>
    
    <script>
        export default {
            name: "login",
            data(){
                return{
                    loginForm:{
                        code: ''
                    },
                    rules:{
                        code:[{ required: true, message: '请输入验证码', trigger: 'blur' }],
                    }                
                }
            },
        }
    </script>

在**编译后**的页面中定位到该提示文本所在的标签，即一个名为 **el-form-item\_\_error** 的div标签

![fa8c10c496924d738f7f5c55dbbf82da.png][]

## 步骤二、自定义样式 ##

思路：

*  elementUI的组件样式作用域是全局的，如果自定义样式的作用域也定义为全局，那么就不会生效（自定义样式被组件原生样式覆盖）；
 *  那么自定义样式所在的style标签就需要被scoped修饰，否则不会生效；
 *  在新的style标签中通过/deep/这种深度选择器来对组件样式进行自定义，比如下面的写法就是把组件的提示文本信息颜色改为黑色

修改后的效果：

![04eada31ffa743d89c9d95970bdcd7c0.png][]

[6b0e1049df9942f1a2f42e326f0575e1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/e0ed780840394fad98612156a77a4846.png
[fa8c10c496924d738f7f5c55dbbf82da.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/4c3cba9a1b9f497e9810912e64e52d14.png
[04eada31ffa743d89c9d95970bdcd7c0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/8cb0f5b061674a2084098da42e84a897.png