#Prop (style)

Component Prop (style), wrapped by <style></style> tags in the .gen file, are used to write component Prop.

The prop part will be merged into the component during compilation and indexed by id or class.

#Syntax

1<style>
2  $($($style_ident{
3      $prop_key: $prop_value;
4  })*)?
5</style>

• $style_ident: property identifier (id or class)
• $prop_key: property
• $prop_value: property value

#use<style>

1<template>
2  <view id="my_view">
3    <label class="my_label"></label>
4  </view>
5</template>
6
7<style>
8  #my_view {
9    height: 100;
10    width: 100;
11    background_visible: true;
12    theme: Error;
13    .my_label {
14      text: "Hello World";
15      color: #f4b177;
16    }
17  }
18</style>

#Indexing principle

In <style>

• # index component id
• . index component class
• Support and recommend nesting

#Weighting principle

The weighting principle of attributes is very simple. The deeper the nesting, the greater the weight value. The greater the weight value, the higher the attribute priority.

1<style>
2  #my_view{
3      .my_label{    2️⃣
4          text: "Hello World";
5          color: #f4b177;
6      }
7  }
8
9  .my_label{   1️⃣
10      color: #FF0000;
11  }
12</style>

In the above example, there are two .my_label, of which 2️⃣ has a greater weight value than 1️⃣ and a higher priority. Therefore, when they have the same attribute color, color: #f4b177; is used, which has a higher priority.

#Merge Principle

The attribute merging principle applies to class. When there are multiple classs with the same name, the attributes in these classs will be merged into one class and also follow the weight principle.

1<style>
2  #my_view {
3    .my_label {
4      text: "Hello World";
5      color: #f4b177;
6    }
7  }
8
9  .my_label {
10    font_size: 16;
11    color: #ff0000;
12  }
13</style>

As above, according to the merging principle, all the attributes of .my_label are finally:

1<style>
2  .my_label {
3    font_size: 16;
4    text: "Hello World";
5    color: #f4b177;
6  }
7</style>