Uni app change the default component style

One 、 explain

• uView file Checkbox Check box

• vue After component compilation , Will template For each element in the [data-v-xxxx] Attribute to ensure that style scoped Only the elements of this component will not pollute the global

• Arrange horizontally without wrapping , as follows
  

• Add style flex-wrap: wrap;, Line wrap successful
  

Two 、 solve

1、 stay class front Join in deep

• If you expect to pass such as modifying its son class The style of . To affect the display effect , Directly increase class There is no effect
• You need to modify the specified component style class front Join in deep Can only be

<style lang="scss" scoped> /deep/ .u-checkbox-group--row{
    
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
</style>

2、 stay vue-cli3 Compile time , use ::v-deep

• stay vue-cli3 Compile time ,deep An error will be reported or a warning will be given , We use it ::v-deep

<style lang="scss" scoped> ::v-deep .u-checkbox-group--row{
    
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
</style>

3、 Before editing , Edit well Screenshot comparison

• Before editing
  
• After editing
  

3、 ... and 、 His shan zhishi

• uni-app Change the default component style