vue 覆蓋elementUI的樣式，如覆蓋el-form表單的樣式

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只選擇一代。