如何使用 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;``

如何使用 Axios 从数据库中获取可变颜色，然后在 Scss 中应用它们 - ReactJs

How to get variable colors from database with Axios and then apply them in Scss - ReactJs

sass

reactjs

axios

scss-mixins