vue 覆盖elementUI的样式，如覆盖el-form表单的样式

妖狐艹你老母 2023-06-11 05:29 3阅读 0赞

vue 覆盖elementUI的样式，如覆盖el-form表单的样式

例如：el-form 表单中的 el-form-item，修改校验后的错误信息样式

实现：

<template>
        <div>
            <el-form :model="addForm" :rules="rules" class="demo-ruleForm">
                <el-form-item prop="userName">
                  <el-input type="text" v-model="addForm.userName" placeholder="输入姓名"></el-input>
                </el-form-item>
            </el-form>
       </div>
    </template>
    <script>
      export default {
        data() {
            return {
                addForm: {
                    userName: ''
                },
                rules: {
                  userName: [
                    {required: true, message: '请输入用户姓名', trigger: 'blur'},
                  ],
                }
            },
        }
        methods: {},
        mounted() {}
    </script>
    <style lang="less">
      .demo-ruleForm{
        .el-form-item__content > .el-form-item__error {
          left: 40px !important;
        }
      }
    </style>

这其中重要的样式代码如下：

>   .demo-ruleForm\{  
>     .el-form-item\_\_content > .el-form-item\_\_error \{  
>       left: 40px !important;  
>     \}  
>   \}

说明：

> **css中“>”是:**
> 
> 　　css3特有的选择器，A>B 表示选择A元素的所有子B元素。
> 
> 　　与A B的区别在于，A B选择所有后代元素，而A>B只选择一代。

发表评论取消回复

表情：

评论列表（有 0 条评论，3人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS :autofill 如何覆盖浏览器自动填充表单的样式

autofill伪类匹配浏览器自动填充值的input元素. 如果用户继续编辑这个元素内容就会停止匹配.

你的名字/ 2024年05月24日 03:24/ 0 赞/ 48 阅读

相关 vue使用elementui的loading踩过的坑，自己添加样式，解决字体图标被覆盖问题

需要设置一个局部loading，发现字体图标被背景色覆盖了，解决方案如下： var loadingInstance = ""; loadingIn

雨点打透心脏的1/2处/ 2023年08月17日 16:25/ 0 赞/ 59 阅读

相关 vue---el-input样式覆盖

给 el-input 添加样式 dialog-input-text ，scss 样式里面添加对应的样式 <el-input class='dialog-input-

以你之姓@/ 2023年06月14日 02:52/ 0 赞/ 4 阅读

相关 vue 覆盖elementUI的样式，如覆盖el-form表单的样式

vue 覆盖elementUI的样式，如覆盖el-form表单的样式例如：el-form 表单中的 el-form-item，修改校验后的错误信息样式实现：

妖狐艹你老母/ 2023年06月11日 05:29/ 0 赞/ 4 阅读

相关 chrome 浏览器表单自动填充默认样式覆盖

chrome 浏览器表单自动填充默认样式覆盖通过box-shadow覆盖底色使用动画通过box-shadow覆盖底色 in

叁歲伎倆/ 2023年06月07日 08:23/ 0 赞/ 9 阅读

相关 ElementUI - input 框组件设置透明背景（样式覆盖）

前言有时后，`input` 框可能需要设置为透明背景来与大背景图融合，如下图所示： ![在这里插入图片描述][20210508110035259.png] 解决

秒速五厘米/ 2023年01月19日 04:58/ 0 赞/ 316 阅读

相关 vue 中父级样式深度覆盖子组件

一、概述项目需要的原因，在sub组件的父级list组件中需要用到xhcj组件，同时sub组件中也用到了xhcj组件，两个地方代码逻辑是相同，仅仅是样式有些微的差别，所以

Myth丶恋晨/ 2022年11月13日 09:26/ 0 赞/ 317 阅读

相关样式覆盖问题

最近做前端使用外源框架，需要对框架本身使用的样式进行本地调适，这就涉及到了优先的问题。一般，样式写在外部文件，然后引入外部文件。通过chorme控制台的Element工具定

￡神魔★判官ぃ/ 2022年06月01日 06:43/ 0 赞/ 214 阅读

相关 css样式表中的样式覆盖顺序

有时候在写`CSS`的过程中，某些限制总是不起作用，这就涉及了`CSS`样式覆盖的问题，如下 <!DOCTYPE html> <html lang="en">

偏执的太偏执、/ 2021年06月26日 16:06/ 0 赞/ 466 阅读

相关 CSS样式的继承与覆盖

样式的继承定义：父元素设置了某属性，子元素也会有该属性下面是会被继承的`CSS`样式属性： azimuth, border-collapse, bord

拼搏现实的明天。/ 2021年06月26日 16:06/ 0 赞/ 481 阅读