Can Reactjs programmatically handle :before?

Question

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

 &l         


        
                      

              相关标签:
       
      

Answer 1

@diehell, a working example of using the <style> component for pseudo elements in ReactJS:

<style>
  {`.element::before {
    content: '';
    ...other CSS you want to use
  }`}
</style>

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

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
}