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

Create new tag <style> and put your calculations as content, append to head or body — Justinas
– Justinas, Commented Mar 6, 2017 at 6:44
@Justinas are you refering to dangerously setting html ? Is this what i should try ? (medium.learnreact.com/…) — Manmeet S. Oberoi
– Manmeet S. Oberoi, Commented Mar 6, 2017 at 7:00
@guest271314 I do not know how to use Jquery in React. Is there any non JQuery way ? — Manmeet S. Oberoi
– Manmeet S. Oberoi, Commented Mar 6, 2017 at 7:00
@ManmeetS.Oberoi Why do you think setting HTML dynamically is dangerous? — Justinas
– Justinas, Commented Mar 6, 2017 at 7:14

guest271314 · Accepted Answer · 2017-03-06 07:15:07Z

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 6, 2017 at 7:15

guest271314

1

Sign up to request clarification or add additional context in comments.

5 Comments

Adam K. Over a year ago

Wow, this is quite nice. Saving as bookmark, this might come handy in the future.

Manmeet S. Oberoi Over a year ago

This does the trick and works as expected. Thanks. Do suggest a react way to replicate the same if possible.

guest271314 Over a year ago

@ManmeetS.Oberoi Not sure what "react way" is. Approach at Answer set properties at CSSStyleSheet loaded at document.

Manmeet S. Oberoi Over a year ago

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.

guest271314 Over a year ago

@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.

Collectives™ on Stack Overflow

Modify element :before CSS rules programmatically in React

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related