uni-app 动态修改 css 样式

前言

最近在使用 uni-app 写微信小程序端项目，本文主要记录下 css 使用 var 注入变量，达到设置动态样式的需求。

记住几个简单的知识点就行，如下：

• 声明 css 变量时，变量名前面要加两根连词线（--）；
• 变量使用 kebab-case 命名方式，即 --header-color 而不是 --headerColor；
• 变量名大小写敏感，--header-color 和 --Header-Color 是两个不同的变量名；
• var() 函数用于读取变量。

接下来，看一下具体实现代码：

<template>
	<view class="header" :style="[headerStyle]">头部内容</view>
</template>

<script>
	export default {
		name:"test",
		data() {
			return {
				headerStyle: {
					'--header-color': 'pink'
				}
			};
		}
	}
</script>

<style lang="scss" scoped>
.header {
	width: 100px;
	text-align: center;
	line-height: 100rpx;
	border: 1px solid #aaa;
	color: var(--header-color);
}
</style>