要素を修正する：CSSのルールがプログラムで反応的に発生する前に

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のためのtransformプロパティを更新することができることです。

:beforeクラスを更新しないようにして、CSSを:beforeをまったく使用しないように変更する方法がある場合は、同様にそれを提案してください。

Js-Fiddle