React style modification background invalid

Background introduction

After clicking , Change an opaque button to a progressively transparent button . The code is as follows ：
Before clicking ：

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

After clicking ：

let style = this.props.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={
    this.style}> Downloaded {
    progStr}</div>
);

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(this.props.style);

style["backgroundColor"] = this.backColor;

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