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

妖狐艹你老母 2023-06-11 05:29 22阅读 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 条评论，22人围观）

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

相关阅读

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

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

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

相关 vue项目中引入全局样式覆盖el-tree样式

1，如何引入全局样式 ①创建一个styl文件，app.styl ②在main.js(项目的主文件)文件中引入import ‘./app.styl’ 文件如我的项目中

ゝ一纸荒年。/ 2023年06月25日 03:02/ 0 赞/ 15 阅读

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

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

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

相关 vue elementUI 覆盖el-tree的样式，选中的背景颜色修改

<style> .el-tree-node.is-current > .el-tree-node__content { background

朴灿烈づ我的快乐病毒、/ 2023年06月11日 06:28/ 0 赞/ 21 阅读

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

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

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

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

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

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

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

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

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

相关样式覆盖问题

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

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

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

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

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

相关 CSS样式的继承与覆盖

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

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