在项目中使用CSS变量来进行皮肤切换

css变量

css变量就是可以在样式表中使用变量来代替某些值,能让性能提升同时在开发中更加的方便。比如我们可以通过css变量实现全局的皮肤替换,通过css变量来控制全局的头号标题的字体大小以及间距等。

css变量的兼容性:

如何实现css变量

css变量的申明,只要在对应的DOM样式中添加--${变量名称}:${变量值};当然--是必须的。css变量的使用也是很简单的var(--${变量名称});,css变量跟js中的let使用一样,可以理解为只能先申明在使用.css变量的使用的前提,是css变量申明在使用变量的DOM的祖先节点、父节点、当前节点,这三种情况下才能使用css变量。当然我们一般都是申明在body或则统一容器的节点下。

下面看一下简单的例子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        .wrapper {
            --primary-color: blue;
            --error-color: red;
            --dark-color: black;
            --width: 100px;
            --height: 100px;
            --big-width: 200px;
            --big-height: 200px;
            background: var(--dark-color);
        }

        .box1 {
            background: var(--primary-color);
            width: var(--width);
            height: var(--height);
        }

        .box2 {
            background: var(--error-color);
            width: var(--big-width);
            height: var(--big-height);
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="box1">

        </div>
        <div class="box2">

        </div>
    </div>
</body>

</html>

这个例子中,是css变量基础的用法,当然还有想在全局中使用的话可以用 :root{--color:red;}使用:root是在全局中申明css变量。

在React中使用css变量实现皮肤切换功能。

我们可以写一个皮肤切换的组件,通过外部传入一个对象,键名和键值等同于css变量。如果这个参数变化了,那么组件就会动态的更新这个DOM来实现css变量值的变化。然后使用这个组件把整个项目包起来就可以轻松实现皮肤切换了。

Theme.jsx

import React,{Component} from 'react';
export default class Theme extends Component{
    static defaultProps = {
        variables:{}
    };
    state = {};
    componentDidMount() {
        this.updateCSSVariable();
    }
    componentDidUpdate(prevProps) {
        if (this.props.variables !== prevProps.variables) {
            this.updateCSSVariable();
        }
    }
    render() {
        const {children} = this.props;
        return (
            <div
                ref={node => {
                    this.node = node;
                }}
            >
                {children}
            </div>
        );
    }
    updateCSSVariable = () => {
        Object.entries(this.props.variables).forEach(([prop, value]) => {
            return this.node.style.setProperty(prop, value);
        });
    };
}

theme1.js

export default {
    '--title-size':'40px',
    '--main-1-color': '#07543C',
    '--main-2-color': ' #19A97B',
    '--main-3-color': '#51E8B8',
    '--gray-1-color': 'rgba(7,84,60,0.20)',
    '--gray-2-color': 'rgba(7,84,60,0.10)',
    '--gray-3-color': 'rgba(7,84,60,0.05)'
};

theme2.js

export default {
    '--title-size':'20px',
    '--main-1-color': 'rgba(255,0,0,1)',
    '--main-2-color': ' rgba(255,0,0,.5)',
    '--main-3-color': 'rgba(255,0,0,.1)',
    '--gray-1-color': 'rgba(7,84,60,0.20)',
    '--gray-2-color': 'rgba(7,84,60,0.10)',
    '--gray-3-color': 'rgba(7,84,60,0.05)'
};

App.js

import React from "react";
import Theme from './Theme';
import theme1 from './theme1';
import theme2 from './theme2';
class App extends React.Component {
    state = {
        theme: theme1
    };
    render() {
        return (
            <Theme variables={this.state.theme}>
                <button onClick={()=>{
                //按钮点击切换皮肤。
                this.setState({
                    theme: this.statetheme === theme1 ? theme2 : theme1
                })}></button>
                <div className="App">
                </div>
            </Theme>
        );
    }
}

export default App;

这样我们就可以实现一个简单的皮肤切换功能了,我觉得这个是影响性能最小,同时又方便快捷的一种方式。大家也可以多多琢磨下如何更好的使用css变量功能。

Share

You may also like...

发表评论

电子邮件地址不会被公开。 必填项已用*标注