vue3 :deep()的使用

文章目录

• 前言
• 一、:deep()是什么？
• • • • • :deep()是可以改变css解析时私有属性的样式
        • 常见使用场景: 如改变输入框的背景颜色
        • 使用:deep()修改背景颜色
        • 总结

          ---

          前言

          对应前端小白来说，一看到:deep()这些模式的用法就不理解是啥意思，下面简单介绍一下:deep()是什么以及如何使用。

          ---

          一、:deep()是什么？

          :deep()是可以改变css解析时私有属性的样式

          常见使用场景: 如改变输入框的背景颜色

          

          我们找到解析时找到输入框的class

          

          使用:deep()修改背景颜色

          meta:
            title: 测试界面
              
          
          import Draggable from 'vuedraggable'
          const reason = ref('')
          
          
            
          
              选择器
            
            
          
              
            
          
          
          :deep() {
              .el-textarea__inner{
                  background: red;
              }
            }
          
          

          ---

          总结

          这个实现例子虽然简单，但是对于小白来说，还是要一点时间去理解的，希望能帮助到您！