Как получить переменные цвета из базы данных с помощью Axios, а затем применить их в Scss - ReactJs

Question

В моем проекте я получил требование получить цвета, хранящиеся в базе данных.Может быть, вопрос будет глупым, но я понятия не имею, как я могу получить их и поместить их в Scss в нужном месте.Я буду рад, если кто-нибудь сможет дать мне какое-то объяснение или дать мне какой-нибудь совет, ссылки и т. Д.

Цвета, хранящиеся в БД:

The main color & text
$colorPrimary #fbd116;
$colorTextPrimary #ff0200;

The second color & text
$colorSecondary #ffffff;
$colorTextSecondary #252525;

Label & text
$colorLabel #ffffff;
$colorTextLabel#87888c;
$colorTextLabelLight #aaa;

Second Label
$colorSecondLabel#f7f7f7;
$colorTextSecondLabel #252525;

Dashboard buttons & icons
$colorSelectButton #404040;
$colorHoverSelectButton #101010;
$colorTextSelectButton#fbd116;

Extra's
$colorShadow  #aaa;
$colorCheckmark #7ac142;
$colorWarning #ffa000;
$colorTrue #008000;
$colorFalse #ff0000;

Это моя логика, но яне знаю, будет ли это правильно или нет.:

colors : {
  color1: '#fff',
  color2: '#aaa'
}

...

axios.post(SERVER_URL + '/api/user/colors/' ,{
    ... some parameters})
.then(response => {
    this.setState({
       brandColors: response.data.colors
    })
})


...

const Styles = {
    header : {
      background: this.state.brandColors.color1
    }
}

Answer 1

constructor(props) {
    super(props)
        this.state={
            tyles: '',

        }
    }

async componentWillMount ()  {
    axios.get('http://www.mocky.io/v2/5d0b46a12f00002b00e3ef3d')

        .then(response => {

            this.setState({
                brandColors : response.data.branding,
                dataReady: true
            })   
        })
}

render() {
    return (
        this.state.dataReady ? (
        <div className='Home'>
            <header className='HomeHeader' style={{background: this.state.brandColors.colorPrimary}}></header>
                <button>Press Me</button>
            <footer className='HomeFooter'></footer>
        </div>
        ) : null
    );
}}

export default Home;``