Can Reactjs programmatically handle :before?

Question

I somehow have to programmatically set the width of the :before for a div.

<div className="something" style={someStyle}> </div>

How can I define the someStyle so that the width of the :before of .something``div can change accordingly??

Answer 1

Yes, you can programmatically change the value of pseudo-elements like ::before, ::after in react.

Here is a trick.

app.js

const widthVar = 34;
const someStyle = {
     "--width": widthVar
}
<div className="something" style={someStyle}> </div>

style.css

.something:before{
      width: var(--width),
      // remaining code
}

Answer 2

Pseudo elements cannot be styled with inline styles as explained in https://stackoverflow.com/a/14141821/368697. You will have to style the something class name in a stylesheet with the .something:before selector. This is not a limitation of React but rather a design choice for HTML + CSS.

If you need to programmatically change the width of the pseudo :before element, it is probably more appropriate as a regular DOM element rendered by React.

Answer 3

I got insight from @am2505 to use CSS variables as it helped me however, this way avoids inline styling.

HTML
<div className="something"> </div>

CSS

:root {
--width: <yourDefaultValue>
}

.something:before{
      width: var(--width),
}

JS

const changeWidth=() => {
    let root = document.querySelector(':root');
      root.style.setProperty('--width', '<yourNewValue>px');
   

call the function at the event you want the width to change. The changeWidth function can be further modified to dynamically work with state using conditional statements.