CSS Pseudo-classes with inline styles in react.js

Question

Now example text with the background will be red color. But I want the class rightElement: after having border-top: color. It should take from const. I don't know how to do that

   const color = "red";

   <div className='rightElement' style={{backgroundColor: color} >Example </div>
   rightElement:after

   {
        border-top :color ( From const color )
   }

Requirement i: I need to pass the colour from config file , Example color :red , 1. In the div rightElement I take the config value color:red using this.props.color.But I need className rightElement:after (its a pseudo element) also (I needed from props ).Its possible to do that one using react.js — lakshman, Jun 07 '19 at 04:04

score 1 · Answer 1 · answered Jun 07 '19 at 04:16

1

It is not possible to directly access the pseudo element.

However, you could change their style indirectly by adding in a new style element containing new rules.

Try like this to add after css.

const color = "red";


var styleElem = document.head.appendChild(document.createElement("style"));

styleElem.innerHTML = "#rightElement:after {border-top: 1px solid "+color+";}";

<div id='rightElement' style="background-color: green" >Example </div>

answered Jun 07 '19 at 04:16

Syed mohamed aladeen

6,507
4
32
59

1

Thanks Syed... i will try like this . – lakshman Jun 07 '19 at 04:40
Super Syed ,Its coming fine .Should we add this one in react code ? because again we are iteration the document .head.appendChild.Is anyway to change as per the react code – lakshman Jun 07 '19 at 05:54
Syed .. any possible solution for react.js .Because the code var styleElem = document.head.appendChild(document.createElement("style")); styleElem.innerHTML = "#rightElement:after {border-top: 1px solid "+color+";}"; look like javascript .Can you do it react based on this??? – lakshman Jun 11 '19 at 06:35

score 0 · Answer 2 · answered Jun 07 '19 at 04:10

you looking for this : ? ( https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties )

:root {
  --my-color: red;
}

.rightElement {
  display: inline-block;
  border-top :5px solid var(--my-color);
}

<div class="rightElement" > Example </div>

score 0 · Answer 3 · answered Jun 07 '19 at 04:12

0

See CSS pseudo elements in React. It seems that a best practice is to use separate elements in React instead of pseudo-elements. Could you just do this instead?

<div className='rightElement' style={{backgroundColor: color}}>
  Example
  <div style={{borderTopColor: color}}></div>
</div>

answered Jun 07 '19 at 04:12

Aaron Sarnat

1,207
8
16

Also, FYI your code had a missing close curly brace on style attribute – Aaron Sarnat Jun 07 '19 at 04:14

score 0 · Accepted Answer · answered Jun 07 '19 at 05:32

In HTML & CSS

.testAfter::after {
  content: "->"
 }

<div class="testAfter">Something</div>

We can use ::after and other pseudo code like this in css.

So we need external css to use pseudo code in react.

// test.css

.rightElement::after {
 content: "-> after";
  border-top: 1px solid red;
}

// Test.js

import React from 'react';

import './test.css';

class Test extends React.Component {
 render () {
  const color = "red";
  return(
   <div>
    <div className='rightElement' style={{backgroundColor: color}} >Example </div>
   </div>
  )
 }
}

export default Test;

Using Inline

render () {
  const color = "red";
  return(
   <div style={{width: '500px', margin: '0 auto', marginTop: '100px'}}>
    <div className='rightElement' style={{backgroundColor: color}} >Example </div>
    <div style={{borderTop: `10px solid ${color}`}}></div>
   </div>
  )
 }

The trick here is instant of creating new element via ::after or ::before I create new element by my own. But creating new element for only styling purpose is not good(Just my option).

CSS Pseudo-classes with inline styles in react.js

4 Answers4