Modify element :before CSS rules programmatically in React

Question

I have an element whose :before style has to be modified based on calculations.

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 Code:

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

}

The ask is to be able to update the transform property for .ring-left:before and .ring-right:before via ReactJS.

If there is a way to not update the :before class and change the CSS to not make use of :before at all, then do suggest that as well.

Js-Fiddle

@Justinas are you refering to dangerously setting html ? Is this what i should try ? (https://medium.learnreact.com/the-style-tag-and-react-24d6dd3ca974#.mgeig2yf2) — Manmeet S. Oberoi, Mar 06 '17 at 07:00
@guest271314 I do not know how to use Jquery in React. Is there any non JQuery way ? — Manmeet S. Oberoi, Mar 06 '17 at 07:00
@ManmeetS.Oberoi: Attention please, do not use jQuery with ReactJS — Abdennour TOUMI, Mar 06 '17 at 07:04
@ManmeetS.Oberoi Why do you think setting HTML dynamically is dangerous? — Justinas, Mar 06 '17 at 07:14

score 8 · Accepted Answer · answered Mar 06 '17 at 07:15

8

You can iterate document.styleSheets, set .style of .cssRules where .selectorText matches pseudo selector

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>

answered Mar 06 '17 at 07:15

guest271314

1
15
104
177

Wow, this is quite nice. Saving as bookmark, this might come handy in the future. – Adam K. Mar 06 '17 at 07:20
This does the trick and works as expected. Thanks. Do suggest a react way to replicate the same if possible. – Manmeet S. Oberoi Mar 06 '17 at 07:36
@ManmeetS.Oberoi Not sure what "react way" is. Approach at Answer set properties at `CSSStyleSheet` loaded at `document`. – guest271314 Mar 06 '17 at 07:38
This is a brute force way of iterating over all the stylesheets added to the project and then searching for the selector. If we could add a dynamically generate a class with pseudo element support and then add it to the specific component. – Manmeet S. Oberoi Mar 06 '17 at 08:46
@ManmeetS.Oberoi You could toggle `.className` of element to apply `css` pseudo element rule to the class. Or, add, remove element having `.className` where pseudo element is set at `css`. The present Question asks how to modify an existing `css` `::before` pseudo element rule. – guest271314 Mar 06 '17 at 16:04

Modify element :before CSS rules programmatically in React

1 Answers1

Linked

Related