react.js 中具有内联样式的 CSS 伪类答案

【问题标题】：CSS Pseudo-classes with inline styles in react.jsreact.js 中具有内联样式的 CSS 伪类
【发布时间】：2019-06-07 13:32:33
【问题描述】：

现在带有背景的示例文本将变为红色。但我想要类 rightElement: 在拥有border-top: color 之后。它应该取自 const。我不知道该怎么做

   const color = "red";

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

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

【问题讨论】：

要求 i：我需要从配置文件中传递颜色，示例颜色：红色，1. 在 div rightElement 中，我使用 this.props.color 获取配置值颜色：红色。但我需要className rightElement:after （它是一个伪元素）也是（我需要来自 props ）。它可以使用 react.js 来做到这一点

标签： javascript reactjs

【解决方案1】：

你在找这个：？ (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);
}

&lt;div class="rightElement" &gt; Example &lt;/div&gt;

【讨论】：

【解决方案2】：

见CSS pseudo elements in React。似乎最好的做法是在 React 中使用单独的元素而不是伪元素。你可以这样做吗？

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

【讨论】：

另外，仅供参考，您的代码在样式属性上缺少一个大括号

【解决方案3】：

不能直接访问伪元素。

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

尝试像这样在css之后添加。

const color = "red";


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

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

&lt;div id='rightElement' style="background-color: green" &gt;Example &lt;/div&gt;

【讨论】：

谢谢赛义德...我会这样尝试。
Super Syed，它来得很好。我们应该在反应代码中添加这个吗？因为我们再次迭代文档 .head.appendChild.Is 无论如何都要根据反应代码进行更改
Syed .. react.js 的任何可能解决方案。因为代码 var styleElem = document.head.appendChild(document.createElement("style")); styleElem.innerHTML = "#rightElement:after {border-top: 1px solid "+color+";}";看起来像javascript。你能根据这个做出反应吗？？？

【解决方案4】：

在 HTML 和 CSS 中

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

&lt;div class="testAfter"&gt;Something&lt;/div&gt;

我们可以在 css 中使用 ::after 和其他类似的伪代码。

所以我们需要外部 css 来在 react 中使用伪代码。

// test.css

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

// 测试.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 创建新元素的瞬间，我自己创建新元素。但是仅出于样式目的创建新元素并不好（只是我的选择）。

【讨论】：