修改元素：在CSS以编程方式在React中规则

Question

我有一个元素，其:before风格必须根据计算修改。

export class Content extends React.Component { 
    render() { 
     return (
      <div className="ring-base"> 
       <div className="ring-left" style={{/* Change here */}}></div> 
       <div className="ring-right" style={{/* Change here */}}></div> 
       <div className="ring-cover"> 
        <div className="ring-text">10%</div> 
       </div> 
      </div> 
     ); 
    } 
} 

CSS代码：

.ring-base { 
    position: absolute; 
    height: 200px; 
    width: 200px; 
    border-radius: 50%; 
    background: red; 
    transform: rotate(90deg); 
    overflow:hidden; 
} 
.ring-cover { 
    position: absolute; 
    height: 180px; 
    width: 180px; 
    background: #fff; 
    border-radius: 50%; 
    top: 5%; 
    left: 5%; 
} 

.ring-cover .ring-text { 
    position: absolute; 

    width: 100%; 
    height: 100%; 
    text-align: center; 
    font-size: 2em; 
    display: flex; 
    justify-content:center; 
    align-content:center; 
    flex-direction:column; 
    transform: rotate(-90deg); 
} 

.ring-right, .ring-left { 
    height: 100px; 
    width: 200px; 
    overflow: hidden; 
    position: absolute; 
} 

.ring-right:before, .ring-left:before { 
    height: inherit; 
    width: inherit; 
    position: absolute; 
    content: ""; 
    border-radius: 100px 100px 0 0; 
    background-color: grey; 
    transform: rotate(0deg); 
} 

.ring-right { 
    -webkit-transform-origin: 50% 0%; 
    -moz-transform-origin: 50% 0%; 
    -ms-transform-origin: 50% 0%; 
    transform-origin: 50% 0%; 
    transform: rotateZ(0deg); 
} 

.ring-left { 
    transform: rotate(180deg); 
    -webkit-transform-origin: 50% 100%; 
    -moz-transform-origin: 50% 100%; 
    -ms-transform-origin: 50% 100%; 
    transform-origin: 50% 100%; 
} 

.ring-right:before { 
    -webkit-transform-origin: 50% 100%; 
    -moz-transform-origin: 50% 100%; 
    -ms-transform-origin: 50% 100%; 
    transform-origin: 50% 100%; 
    transform: rotate(0deg); 
} 

.ring-left:before { 
    -webkit-transform-origin: 50% 100%; 
    -moz-transform-origin: 50% 100%; 
    -ms-transform-origin: 50% 100%; 
    transform-origin: 50% 100%; 
    -webkit-transform: rotate(0deg); 
    -moz-transform: rotate(0deg); 
    -ms-transform: rotate(0deg); 
    transform: rotate(0deg); 

} 

的要求是能够通过ReactJS更新变换属性.ring-left:before和.ring-right:before。

如果有办法不更新:before类并更改CSS根本不使用:before，那么也建议这样做。

Js-Fiddle