title: How to get variable colors from database with Axios and then apply them in Scss - ReactJs
body: <p>On my project i got an requirement to get the colors stored in the database . Maybe the question will be stupid but i don't have any idea how can i get them and place them in Scss on the right place . I will be happy if somebody can give me some explanation or give me some advice , links etc.</p>
  
  <p>Colors stored in the DB:</p>
  
  <pre><code>The main color &amp; text
  $colorPrimary #fbd116;
  $colorTextPrimary #ff0200;
  
  The second color &amp; text
  $colorSecondary #ffffff;
  $colorTextSecondary #252525;
  
  Label &amp; text
  $colorLabel #ffffff;
  $colorTextLabel#87888c;
  $colorTextLabelLight #aaa;
  
  Second Label
  $colorSecondLabel#f7f7f7;
  $colorTextSecondLabel #252525;
  
  Dashboard buttons &amp; icons
  $colorSelectButton #404040;
  $colorHoverSelectButton #101010;
  $colorTextSelectButton#fbd116;
  
  Extra's
  $colorShadow  #aaa;
  $colorCheckmark #7ac142;
  $colorWarning #ffa000;
  $colorTrue #008000;
  $colorFalse #ff0000;
  
  </code></pre>
  
  <p>This is my kind of logic , but i don't know that it will be the right way or not. :</p>
  
  <pre><code>
  colors : {
    color1: '#fff',
    color2: '#aaa'
  }
  
  ...
  
  axios.post(SERVER_URL + '/api/user/colors/' ,{
      ... some parameters})
  .then(response =&gt; {
      this.setState({
         brandColors: response.data.colors
      })
  })
  
  
  ...
  
  const Styles = {
      header : {
        background: this.state.brandColors.color1
      }
  }
  </code></pre>