Vue项目中，引用组件库后，怎么在单个组件中自定义样式

1. 用deep ，但并不能解决所有样式的修改，只针对部分样式有效，像这样！

   /deep/ .el-input__inner {
     position: relative;
     background: #f6f6f6;
     border-radius: 0.625rem;
     color: #999;
     padding-left: 3.125rem;
     height: 2.5rem;
     font-size: 0.8rem;
     caret-color: #4678ff;
   }
   

2. 双重style ：当我们不想去掉scoped属性时，我们可以采取这种写法，在原有文件的样式标签里嵌套一个不带scoped的style标签，来写我们需要修改的组件库的样式。

3. scoped ：我们知道，vue每个文件的样式部分都会有个scoped属性，该属性限制样式只在当前文件所在的作用域生效，而不会影响其他地方，虽然这样避免了样式冲突的问题，但是这也是制约我们不能修改组件库样式的问题来源，我们可以通过去掉scoped属性，借此来达到修改组件库样式的目的，为了避免样式冲突，我们可以采取sass嵌套书写样式，既可以完美修改组件库的样式，又能避免样式冲突，这也是我项目中最常用的一种方式，

4. 全局样式 ：归根结底，无法修改样式还是因为作用域导致，假如我们有个公共的全局css文件(index.css)，我们可以在控制台找到对应组件的样式，然后通在全局文件中重写/添加/修改该组件的样式，就可以正常改变组件的样式了；
   缺点：因为是全局文件，所以针对每个地方的同组件都生效，举个例子，当我们在多处使用了弹框组件，因为全局已经给定了样式，就无法做到每个地方的弹框样式不同的效果，当我们需要多处样式不同时，这种方法无疑会限制我们；