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

【问题标题】：Changing colours using custom CSS properties - resetting on refresh? (ReactJS)使用自定义 CSS 属性更改颜色 - 刷新时重置？（反应JS）
【发布时间】：2021-03-17 10:25:05
【问题描述】：

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

变量.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);

【问题讨论】：

标签： javascript css reactjs sass css-variables

【解决方案1】：

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

根据您要达到的目标，有几种选择：

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

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

【讨论】：

【解决方案2】：

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

如果您想创建用户可以选择自己的主题的主题功能，您应该将他们的选择存储在localstorage 或数据库中（持久存储）。只有这样，他们的选择才会在更新中持续存在。因此，请将您从表单中获得的用户选择存储在某个永久位置（而不是 React 状态）。

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

【讨论】：