Question

现在示例背景文本将为红色。但是我想要class rightElement：在具有border-top：颜色之后。它应该取自const。我不知道该怎么做

   const color = "red";

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

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

Answer 1

您在寻找这个吗？（https://wix.github.io/react-native-navigation/#/docs/showcases）

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

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

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

Answer 2

请参见CSS pseudo elements in React。似乎最佳实践是在React中使用单独的元素而不是伪元素。你能代替吗？

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

Answer 3

不可能直接访问伪元素。

但是，您可以通过添加包含新规则的新样式元素来间接更改其样式。

尝试这样在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>

Answer 4

在HTML和CSS中

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

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

我们可以在CSS中使用:: after和其他伪代码。

因此，我们需要外部CSS才能在响应中使用伪代码。

// 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;

使用内联

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

这里的技巧是立即通过:: after或:: before在自己创建新元素之前创建新元素。但是仅出于样式目的创建新元素是不好的（只是我的选择）。

在React.js中具有内联样式的CSS伪类

4 个答案: