UStyle 是一个用于解决UTS动态设置样式时的在不同平台不一致问题的。

问题背景

在安卓和iOS平台上，通过JavaScript动态设置样式时，若设置的样式属性值为空或无效，会导致样式设置失败并应用uni-app X的默认样式；而在Web端，这种情况下则不会应用该样式，从而保持元素的原始样式。

问题重现

<template>
    <text class="text-class" style="styles">这是一个动态样式的元素</text>
</template>

<script setup lang="uts">
import { ref } from 'vue'

const styles = new Map<string, string>()
styles.set('color', '')
</script>

<style scoped>
.text-class {
    color: green;
}
</style>

通过 styles 设置的样式属性值为空，在安卓和iOS平台上，文字样式会变成红色，而在Web端则保持绿色。而正确的预期是，在所有平台上，若设置的样式属性值为空，都应保持绿色。

使用方法

1. 导入 UStyle 类

<template>
    <text class="text-class" style="styles">这是一个动态样式的元素</text>
</template>

<script setup lang="uts">
import { UStyle } from '@/uni_modules/uview-unix'
import { ref } from 'vue'

const styles = new UStyle()
styles.set('color', '')
</script>

<style scoped>
.text-class {
    color: green;
}
</style>

注意事项

1. UStyle 类继承了 Map 类，因此可以使用 Map 类的所有方法。
2. UStyle 类的 set 方法只检查样式属性值是否为空，并没有检测样式属性值是否符合CSS样式规范。比如：styles.set('color', '1234') 这种情况并未检查