微信小程序：从零到一，巧用JS动态修改CSS样式和CSS变量

2023-10-23 06:51:02

利用 JS 和 CSS 变量动态修改微信小程序样式

1. 引入 JS 文件

在小程序页面文件中，引入 JS 文件，例如：

import {StyleSheet} from '@tarojs/taro';

2. 创建样式对象

创建一个样式对象，包含要修改的样式属性：

const styles = StyleSheet.create({
  text: {
    fontSize: '20px',
    color: 'red',
    borderWidth: '1px',
    borderColor: 'blue',
  },
});

3. 赋予样式对象

将样式对象赋予页面元素：

<View style={styles.text}>这是要修改样式的文字</View>

4. 使用 CSS 变量

使用 CSS 变量定义样式属性，并在样式表中使用：

CSS 变量定义：

:root {
  --text-size: 20px;
  --text-color: red;
  --border-width: 1px;
  --border-color: blue;
}

样式表使用：

.text {
  font-size: var(--text-size);
  color: var(--text-color);
  border-width: var(--border-width);
  border-color: var(--border-color);
}

优势：

无需重新编译小程序
灵活修改样式
CSS 变量提供更便捷的样式定义和修改

示例代码：

index.js

import {StyleSheet} from '@tarojs/taro';

const styles = StyleSheet.create({
  text: {
    fontSize: '20px',
    color: 'red',
    borderWidth: '1px',
    borderColor: 'blue',
  },
});

export default class Index extends Component {
  render() {
    return (
      <View>
        <View style={styles.text}>这是要修改样式的文字</View>
      </View>
    );
  }
}

index.css

:root {
  --text-size: 20px;
  --text-color: red;
  --border-width: 1px;
  --border-color: blue;
}

.text {
  font-size: var(--text-size);
  color: var(--text-color);
  border-width: var(--border-width);
  border-color: var(--border-color);
}