current position:Home>React style modification background invalid

React style modification background invalid

2022-04-29 09:19:24from_ the_ star

Background introduction

 Insert picture description here
After clicking , Change an opaque button to a progressively transparent button . The code is as follows :
Before clicking :

let style =;
style["background"] = "rgba(250,103,37,1)";
return (
<div style={}> Download now </div>

After clicking :

let style =;
let progStr= Math.floor(progress*100)+"%";
style["background"] = `linear-gradient(to right,${
      this.backColor} ${
      progStr}, rgba(39,42,38,0.1) 0%);`;
return (
<div style={}> Downloaded {

What happened : modify style After the object , The background color is not refreshed , Or opaque orange .

Problem analysis

1、style Object modification ,react Object reference address comparison is adopted , For it , The style has not been modified , So it won't refresh . Use deep copy to solve .
2、 use 1 after ,style The object is changed , But when displayed , There is also the transparent orange setting before the gradual opacity , Equivalent to

background:rgba(250,103,37,1) linear-gradient(to right,rgba(250,103,37,1) 40%, rgba(39,42,38,0.1) 0%);

In fact, the inline style displayed is

background:linear-gradient(to right,rgba(250,103,37,1) 40%, rgba(39,42,38,0.1) 0%);

Maybe it's my browser kernel , On developer tools , Remove background It can be displayed normally on the tick . For it , I only modify it background-image, No changes background-color, No redrawing .
Using the following method to modify the style can solve :

let style = clone(;

style["backgroundColor"] = this.backColor;

style["backgroundImage"] = `linear-gradient(to right,${
      this.backColor} ${
      progStr}, rgba(39,42,38,0.1) 0%);`;

copyright notice
author[from_ the_ star],Please bring the original link to reprint, thank you.

Random recommended