How to Use Css Variable in React Component?-CodePudding

I want to use content variable with in-line styles in react, but I dont know how to do this ?

CSS3

.right::after, button::after {
 
  content: var(--content);
  display: block;
  position: absolute;
  white-space: nowrap;
  padding: 40px 40px;
  pointer-events:none;
}

React Component

 return (
    <Button
      {...configButton}
      style={{'--content': "Login" }}
    >
        <div ></div>
             Login
    <div ></div>
      {children}
    </Button>
  );

CodePudding user response：

Ok the solution to this problem is quite simple, It made me think for a while.

The css variable that you provided works indeed.

But when it comes to the content of a psudo element then you should provide the value with a pair of quotes and it will work fine.

<Button
      {...configButton}
      style={{'--content': "'Login'" }}
    >

change the "Login" into "'Login'" and this should work fine. thank you.

CodePudding user response：

It should work. Are you passing style to the actual rendered element in Button component? Is the CSS aplied?

div:after {
  content: var(--test-var);
}

<div style="--test-var: 'Test'"></div>