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

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

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

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

实现：

  1. <template>
  2.     <div>
  3.         <el-form :model="addForm" :rules="rules" class="demo-ruleForm">
  4.             <el-form-item prop="userName">
  5.               <el-input type="text" v-model="addForm.userName" placeholder="输入姓名"></el-input>
  6.             </el-form-item>
  7.         </el-form>
  8.    </div>
  9. </template>
  10. <script>
  11.   export default {
  12.     data() {
  13.         return {
  14.             addForm: {
  15.                 userName: ''
  16.             },
  17.             rules: {
  18.               userName: [
  19.                 {required: true, message: '请输入用户姓名', trigger: 'blur'},
  20.               ],
  21.             }
  22.         },
  23.     }
  24.     methods: {},
  25.     mounted() {}
  26. </script>
  27. <style lang="less">
  28.   .demo-ruleForm{
  29.     .el-form-item__content > .el-form-item__error {
  30.       left: 40px !important;
  31.     }
  32.   }
  33. </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 条评论，74人围观）

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

相关阅读

    相关 样式覆盖问题

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

    ￡神魔★判官ぃ￡神魔★判官ぃ/ 0 赞/ 304 阅读