实际开发中经常会遇到一种情况，一个功能需求例如表格，可以直接使用element等组件库的表格组件，但实际需求总不会是和组件完全一样的，UI会有各种天马行空的样式给你，我们只需要改改组件样式即可使用。

为了保证每个组件的css唯一性，避免污染全局或者被全局污染，vue提供了scoped作用域，这样在打包的时候会生成一个独一无二hash值，这样父组件的样式就不会影响到子组件了。

因此在scope作用下，我们直接覆盖组件样式是无效的，而使用 !important 会产生组件间样式穿透等各种问题，我们使用deep解决这个问题，在vue3中deep使用方式如下

:deep(样式名称) {
    
}

例如

:deep(.el-form-item) {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    color: #454545;
}