修改elmentUI中组件的样式

最新推荐文章于 2024-08-20 16:20:51 发布

起名好难（# #）

最新推荐文章于 2024-08-20 16:20:51 发布

阅读量818

点赞数

分类专栏：前端文章标签： elementui css less

本文链接：https://blog.csdn.net/qq_49172635/article/details/130023933

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue结合ElementUI的项目中对组件样式进行自定义。首先，需要找到目标元素的类名，例如`el-form-item__error`。然后，由于ElementUI的样式全局生效，自定义样式需在scoped的style标签内使用深度选择器`/deep/`来穿透作用域，从而改变组件（如输入框验证提示文本）的颜色等属性。

摘要由CSDN通过智能技术生成

背景知识

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

步骤一、元素定位

思路：

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

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

修改前的效果如下：

附上部分源码如下：

<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标签

步骤二、自定义样式

思路：

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

<style>
    //此处编写页面中其他标签的css
</style>


<style scoped>
    //此处编写对ElementUI的自定义样式

    /deep/ .el-form-item__error{
      color: black;
    }
</style>

修改后的效果：