使用自定义 CSS 属性更改颜色 - 刷新时重置? (ReactJS)

Changing colours using custom CSS properties - resetting on refresh? (ReactJS)

我试图让我的管理员能够更改我的项目的品牌和颜色,我目前正在使用 CSS 自定义属性来执行此操作,但是,这似乎没有保存.当我刷新页面时,它会将颜色刷新回其原始状态。有什么办法可以解决这个问题吗?

代码

JavaScript - 管理面板


import React, { Component } from 'react'
import './CompanyBranding.scss'
import firebase from 'firebase'

export default class CompanyBranding extends Component {

    state = {
        content: [],
        textbox: "",
        link: "",
        primaryColour: "",
        secondaryColour: ""
    }

    componentDidMount() {
        firebase.firestore().collection('site').doc('public').collection('footer').doc('content').get().then(doc => {
            const content = []
            const data = doc.data()
            this.setState(data)
            content.push(data)
            this.setState({content})
            this.setState({contentLength: content.length})
          })
    }

    handleChange = (e) => {
        this.setState({
            [e.target.id]: e.target.value,
        }) 
    }

    
    handleSubmit = (e) => {
        e.preventDefault();
        firebase.firestore().collection('site').doc('public').collection('footer').doc('content').set({
            textbox: this.state.textbox,
            link: this.state.link
        }).then(alert("Updated"), 
        document.getElementById("companydetails").reset()
        )

        document.documentElement.style.setProperty(
            '--primary-color', 
            this.state.primaryColour
        )

        document.documentElement.style.setProperty(
            '--secondary-color', 
            this.state.secondaryColour
        )
    }




    render() {
        return (
            <div>
                <div className="CompanyBranding">
                    <h1 className = "PageHeading"> Branding</h1>
                        <form className = "CompanyBrandingForm">
                            <label htmlFor = "Logo"> Company Logo</label> <br/>
                            <input type = "file" id = "Logo" name = "Logo" accept = "image/png, image/jpeg"/><br/><br/>

                            <label htmlFor = "PrimaryColour"> Primary Colour </label> <br/>
                            <input type = "color" id = "primaryColour" name = "PrimaryColour" onChange = {this.handleChange}/><br/><br/>

                            <label htmlFor = "SecondaryColour"> Secondary Colour </label> <br/>
                            <input type = "color" id = "secondaryColour" name = "SecondaryColour" onChange = {this.handleChange}/><br/><br/>

                            <button onClick = {this.handleSubmit} className = "SubmitButton"> Submit </button>
                        </form>
                </div>

                <div className="FooterContent">
                    <h1 className = "PageHeading"> Footer </h1>
                        <form className = "CompanyBrandingForm">

                            <label htmlFor = "textbox"> Text box</label> <br/>
                            <textarea id = "textbox" value = {this.state.textbox} onChange = {this.handleChange} />
                            <br/><br/>

                            <label htmlFor = "link"> GDPR link </label> <br/>
                            <input type = "text" id = "link" value = {this.state.link} onChange = {this.handleChange}/>


                            <button onClick = {this.handleSubmit} className = "SubmitButton"> Submit </button>
                        </form>
                </div>

            </div>
        )
    }
}

Variables.scss


:root {
    --primary-color: #2f78e6;
    --secondary-color:#2d4f81;
}

// Primary colour (can be changed by admin)
$base-colour: var(--primary-color);
$secondary-color: var(--secondary-color);

当您刷新页面时,您的整个应用程序都会重新呈现。因此,随着状态丢失,颜色会恢复为默认值。这意味着你需要某种坚持。

根据您要实现的目标,有几种选择:

如果您希望管理员为每个人更改主题,您应该将该主题存储在某种数据库中,例如,Firestore,因为您已经在使用它。当您初始化状态时,您 运行 查询并从 Firestore 中获取值。

如果您希望管理员只为他自己更改主题,您可以在localStorage 中设置首选颜色,然后在初始化状态时从中获取值。

无论您在 React(或 JS)中更改什么样式,都只会在用户刷新或关闭页面之前有效,因为那是 JavaScript 的范围。

如果您想创建用户可以选择自己主题的主题功能,您应该将他们的选择存储在 localstorage 或数据库中(持久存储)。只有这样,他们的选择才会通过刷新持续存在。因此,将用户从表单中获得的选择永久存储(而不是处于 React 状态)。

并且无论何时加载应用程序,您都必须从您使用的任何持久存储中获取用户的选择,并在 CSS 中设置 属性(就像您所做的那样)。