Javascript 使用自定义CSS属性更改颜色-刷新时重置？（JS）

我试图让我的管理员能够改变我的项目的品牌和颜色，我目前正在使用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>
        )
    }
}

---

当您刷新页面时，整个应用程序将被重新提交。因此，当状态丢失时，颜色将恢复为默认值。这意味着你需要某种坚持

根据您试图实现的目标，有几个选项：

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

---

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

刷新页面时，整个应用程序将重新提交。因此，当状态丢失时，颜色将恢复为默认值。这意味着你需要某种坚持

根据您试图实现的目标，有几个选项：

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

---

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

在React（或JS）中更改的任何样式只有在用户刷新或关闭页面之前才有效，因为这就是JavaScript的作用域

如果您想创建一个用户可以选择自己主题的主题功能，您应该将他们的选择存储在

localstorage

或数据库（持久存储）中。只有到那时，他们的选择才会持续下去。因此，将用户从表单中获得的选择存储在永久的位置（而不是处于React状态）

---

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

无论您在React（或JS）中更改什么样式，都只有在用户刷新或关闭页面之前才有效，因为这是JavaScript的范围

如果您想创建一个用户可以选择自己主题的主题功能，您应该将他们的选择存储在

localstorage

或数据库（持久存储）中。只有到那时，他们的选择才会持续下去。因此，将用户从表单中获得的选择存储在永久的位置（而不是处于React状态）

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

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

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