Modify Element :Before CSS Rules Programmatically in React

Modify element :before CSS rules programmatically in React

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>

CSS pseudo elements in React

Got a reply from @Vjeux over at the React team:

Normal HTML/CSS:

<div class="something"><span>Something</span></div>
<style>
    .something::after {
    content: '';
    position: absolute;
    -webkit-filter: blur(10px) saturate(2);
}
</style>

React with inline style:

render: function() {
    return (
        <div>
          <span>Something</span>
          <div style={{position: 'absolute', WebkitFilter: 'blur(10px) saturate(2)'}} />
        </div>
    );
},

The trick is that instead of using ::after in CSS in order to create a new element, you should instead create a new element via React. If you don't want to have to add this element everywhere, then make a component that does it for you.

For special attributes like -webkit-filter, the way to encode them is by removing dashes - and capitalizing the next letter. So it turns into WebkitFilter. Note that doing {'-webkit-filter': ...} should also work.

React change CSS with input

You can refer to this question React Js conditionally applying class attributes

<div className={description.indexOf('rain') > 0 ? 'rainy' :  description.indexOf('cloud') > 0 ? 'cloudy' : ....)}>

or using classnames for a more readable approach

let myWeatherClasses = classNames(
  {
    'rainy': description.indexOf('rain') > 0,
    'cloudy': description.indexOf('cloud') > 0,
    ...
  }
);

How change content value of pseudo :before element by Javascript

Update (2018): as has been noted in the comments, you now can do this.

You can't modify pseudo elements through JavaScript since they are not part of the DOM. Your best bet is to define another class in your CSS with the styles you require and then add that to the element. Since that doesn't seem to be possible from your question, perhaps you need to look at using a real DOM element instead of a pseudo one.

How to dynamically add css style to pseudo classes in React

You could use JS to modify the global properties of CSS.

1. Declare properties in index.css or App.css and add your basic styles that will utilize these variables.

:root {
  --color-surface: white;
}

button {
  background: var(--color-surface);
}

2. Modify these properties using JS(onMouseEnter and onMouseLeave). i.e.

//onMouseEnter
document.documentElement.style.setProperty("--color-surface", "black");

//onMouseLeave
document.documentElement.style.setProperty("--color-surface", "white")

There a few references you can follow:

Blog and CodSandBox

Note: Not sure if it's a good practice(I haven't seen in projects I've worked on), I would recommend using CSS-in-JS or libraries such as styled component.

Modify React Element From React Class

I believe to do it you need to get a reference to the element in the render function, and that element should be one of the component child elements — so traverse this.props.children and find the element you are looking for. Something like this:

render () {
  let children = React.Children.toArray(this.props.children);
  children.forEach((child) => doSomething(child))
}

---

Related Topics