vue 中 scoped 的坑

 一般用vue框架，在组件中为了不相互影响各自的样式，都会在 style 标签上加上 scoped , scoped 的作用是限制了样式的作用范围，只在本页有效。

###### 最好的办法就是在要更改的样式名字前添加 ```/deep/ ```

去掉scoped 这个属性，用来解决更改组件内的样式并不是很好的解决方法，我后来又看到一个方法，在要更改的样式前边添加 /deep/ 就可以了，比如要更改ant-design-vue 中的输入框的背景颜色，elementUI组件同理。

```

/deep/  input.ant-input { background: #F1F2F6; } 

```

其他解决办法：

       -  要更改组件的样式，比如element, iview 组件 , 就必须去掉scoped 。然后找到要更改的组件的元素的类名。

   如要更改饿了么组件中的按钮的样式 ： 

                <style lang="scss">

                       .el-checkbox-button, .el-checkbox-button__inner{

                            ......

                        }

                </style>

 

         - 要想要不会全局污染， 那么在每个自己的组件下的div添加一个className或者id 。在要更改的饿了么组件的类名前 ，添加自己组件的类名或者id名即可。比如一个组件的类名为 .filemaplist ：            <template>

                  <div class="filemaplist" @mouseup='Release'>

                  </div>

            </template>

            

            .......

        

            

             <style lang="scss">

                     .filemaplist  .el-checkbox-button, .el-checkbox-button__inner{

                            ......

                        }

                </style>