preface

When using VUE to build a project, a third-party component library is referenced. You only need to change the style of the third-party component library on the current page so as not to contaminate the global style. Using scoped on the styles TAB to style is only for this page, but changing the component styles at this point does not work.

How scoped works

The scoped property in VUE works primarily through PostCSS translation, which is shown below

< span style = "box-sizing: border-box; color: red; color: red; < span style =" box-sizing: border-box! Important; word-wrap: break-word! Important; "style =" box-sizing: border-box! Important;" } </style> <template> <div class="example" data-v-5558831a>hi</div> </template>Copy the code

Through >>> scoped

< span style = "box-sizing: border-box! Important; word-wrap: break-word! Important;"Copy the code

Some preprocessors such as Sass and Less cannot parse >>> correctly. You can use the /deep/ operator (alias of >>>)

<style lang="sass" scoped> /deep/ third-party component class name {style} </style>Copy the code
<template> <el-input class="custom-input"><el-input> </template> // styles. Custom -input {width: 90px; margin-top: 15px; >>> .el-input { text-align: center! important; } } // Less || Sass .custom-input { width: 90px; margin-top: 15px; /deep/ .el-input { text-align: center! important; }}Copy the code

Instead of /deep/, use ::v-deep

::v-deep .van-notice-bar__wrap {
  height: 30px;
  padding-left: 20px;
}
Copy the code

Note: The penetrating method actually violates the meaning of the scoped property. Also, excessive use of scoped in VUE increases the size of the page package file. Generally, styles that can be written in the index should be written in the index as much as possible. We can achieve a scoped effect by adding a unique class to the outer component in the index style to distinguish between components and third-party styles, and it is convenient to modify the styles of various third-party components.