摘要：
当我们在vue中引入第三方组件库时，vue组件中的作用域样式将成为我们修改样式的障碍。有三种方法可以在不影响全局样式的情况下修改样式：1.添加新样式，而不添加scoped＜style＞。我的{margin:20px；}我的el-input__内部｛border-radius:15px；/*此样式有效*/｝。my el-input__内部｛border radius:30px；/*此样式不起作用*/｝2使用深度样式穿透。我的el input__内部｛border radius:30px；/*这不起作用*/｝。我的/feed/。el input__内部｛border radius:30px；/*这是有效的*/｝3使用˃˃穿透。我的el input__内部｛border radius:30px；/*这不起作用*/｝。我的˃˃˃el-input__内部｛边界半径：30px；/*这些工作*/顺序：1pxsolid#eceef2；大纲：0；｝4如果某些样式在行中的权重较高，则需要使用以上方法来确保可以修改和添加样式！重要的是增加权重.my˃˃˃。el-input__内部{边框半径：30px；边框：1pxsolid#eceef2；轮廓：0；宽度：400px！
当我们在vue中引入第三方组件库的时候，vue组件中样式的scoped就会成为我们修改样式的阻碍，有以下三种方法修改样式，并且不影响全局样式：
1 在样式外新增一个样式不添加scoped
<style> .my{ margin: 20px; } .my .el-input__inner{ border-radius: 15px;/* 这个样式起效果 */ } </style> <style scoped> .my .el-input__inner{ border-radius: 30px; /* 这个样式不起效果 */ } </style>
2 使用deep样式穿透
<style scoped> .my .el-input__inner{ border-radius: 30px;/* 这个不起作用 */ } .my /deep/ .el-input__inner{ border-radius: 30px;/* 这个起作用 */ } </style>
3 使用>>>穿透
<style scoped> .my .el-input__inner{ border-radius: 30px;/* 这个不起作用 */ } .my >>> .el-input__inner{ border-radius: 30px;/* 这些起作用 */ border: 1px solid #eceef2; outline: 0; } </style>
4 有些样式是行内样式权重比较高则需要使用上面的几种方法来保证可以修改样式并且添加上!important来增加权重
<el-input v-model="input" placeholder="请输入内容" style=" 300px;"></el-input> <style scoped> .my >>> .el-input__inner{ border-radius: 30px; border: 1px solid #eceef2; outline: 0; width: 400px!important; } </style>
这样input框的宽度就是400px了