Javascript Girl
  1. Javascript Girl
  3. Modifier l'élément: avant que CSS règle par programme dans React
Intereting Posts
Pourquoi l'opérateur de module affiche-t-il un nombre fractionnaire en javascript? Comment faire des migrations knex.js? Détection du décalage d'un élément en mode défilement dans javascript / jQuery IE suit le lien, même après onclick = "return false;" Comment obtenir la demande uri à partir de location.href en javascript? Comment comparer la date partie seule d'une date de temps Script de Photoshop JS pour créer et appliquer un masque de calque Connexion Firebase avec des composants réactifs Twitter Bootstrap scrollspy toujours en sélectionnant le dernier élément Découvrez si la console Chrome est ouverte Où placer $ (document) .ready (function ()? SetTimeout inside while loop Regex / Javascript pour transformer les degrés Minutes décimales en degrés décimaux Avantage d'utiliser Object.create Comment améliorer la performance du webpack?

Modifier l'élément: avant que CSS règle par programme dans React

J'ai un élément dont :before style doit être modifié en fonction des calculs. 

 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> ); } }

Code 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); }

La demande est de pouvoir mettre à jour la propriété transform pour .ring-left:before et .ring-right:before via ReactJS.

S'il existe un moyen de ne pas mettre à jour :before classe et de modifier le CSS pour ne pas utiliser :before tout, alors, suggère cela aussi.

Js-Fiddle

Vous pouvez itérer document.styleSheets , définissez .style de .cssRules où .selectorText correspond au pseudo sélecteur 

 let sheets = document.styleSheets; let selector = "div::before"; let replacementContent = '"after"'; for (let sheet of sheets) { for (let rule of sheet.cssRules) { if (rule.selectorText === selector) { rule.style["content"] = replacementContent; } } } 
 div:before { content: "before"; color: red; font-weight: bold; text-align: center; text-shadow: 2px 2px 2px #000; background: green; width: 50px; height: 50px; display: block; } 
 <div></div>