一般用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>
        
        

 

 

 

Logo

前往低代码交流专区

更多推荐