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
– lakshman, Commented Jun 7, 2019 at 4:04

Syed mohamed aladeen · Accepted Answer · 2019-06-07 04:16:31Z

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 7, 2019 at 4:16

Syed mohamed aladeen

6,8134 gold badges36 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

lakshman Over a year ago

Thanks Syed... i will try like this .

lakshman Over a year ago

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 Over a year ago

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???

Htoo Yan Naing Kyaw · Accepted Answer · 2019-06-07 05:32:33Z

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).

Mister Jojo · Accepted Answer · 2019-06-07 04:10:57Z

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>

Aaron Sarnat · Accepted Answer · 2019-06-07 04:12:24Z

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>

Also, FYI your code had a missing close curly brace on style attribute

Collectives™ on Stack Overflow

CSS Pseudo-classes with inline styles in react.js

4 Answers 4

3 Comments

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

1 Comment

Linked

Related