How does reac implement the function of changing skin color?

The content of this article is about how to realize the function of changing skin color in Reac. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. Goal

Provide several theme colors for users to choose, and then change the theme color of the application according to the user’s choice;

2. Record the user’s selection in the local cache;
3. Each time you enter the application When, read the cache and determine which style file to load based on the cached information;

 ![](https://images2018.cnblogs.com/blog/1178432/201808/1178432-20180813142303707-1847250400.png)

Copy after login

 "
   <span>
               <i></i>
               <i></i>
               <i></i>
               <i></i>
    </span>

   toggleSkin(index){
      setItem('skin',index)  //将最新的主题色名称更新到本地缓存中  
      this.loadingToast('主题色更换中..')
      location.reload()       //主题色更改后刷新页面
  }

"

Copy after login

   var aa=''
   if(getItem('skin')=='0'){
        aa='app'
   }else if(getItem('skin')=='1'){
       aa='app-skin1'
   }else if(getItem('skin')=='2'){
       aa='app-skin2'
   }else if(getItem('skin')=='3'){
        aa='app-skin3'
   }else{
       aa='app'
   }
  require([`./static/css/${aa}.scss`], function(list){});

Copy after login

./static/css/${aa}.scss);, but I don’t know why the four styles were changed. The files are all loaded. There will be no problem if you change it to the one above. Let’s study the requirement again when you have time;

What are the methods in jQuery? Commonly used ones in jQuery Method (with code)

#What is a js closure? Understanding js closures (with code)

The above is the detailed content of How does reac implement the function of changing skin color?. For more information, please follow other related articles on the PHP Chinese website!