Блог

Я пытаюсь разрешить своим администраторам изменять фирменный стиль и цвета моего проекта, в настоящее время я использую для этого пользовательские свойства 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);
 

Когда вы обновляете страницу, все ваше приложение обновляется заново. Таким образом, цвет возвращается к значению по умолчанию по мере потери состояния. Это означает, что вам нужна какая-то настойчивость.

В зависимости от того, чего вы пытаетесь достичь, есть несколько вариантов:

Если вы хотите, чтобы администратор изменил тему для всех, вам следует сохранить эту тему в какой-либо базе данных, например, Firestore, поскольку вы уже используете ее. Когда вы инициализируете состояние, вы запускаете запрос и извлекаете значение из Firestore.

Если вы хотите, чтобы администратор менял тему только для себя, вы можете установить предпочтительный цвет в локальном хранилище, а затем извлечь из него значение при инициализации состояния.

Какой бы стиль вы ни изменили в React (или JS, если на то пошло), он будет действителен только до тех пор, пока пользователь не обновит или не закроет страницу, потому что это область действия JavaScript.

Если вы хотите создать функциональность темы, в которой пользователи могут выбирать свою собственную тему, вам следует сохранить их выбор либо в localstorage базе данных, либо в базе данных (постоянное хранилище). Только тогда их выбор сохранится благодаря обновлениям. Итак, сохраните выбор пользователя, который вы получаете из формы, где-нибудь на постоянной основе (не в состоянии реакции).

И всякий раз, когда приложение загружается, вы должны выбрать пользователя из любого постоянного хранилища, которое вы использовали, и установить свойство (как вы это сделали) в CSS.