在 React 中以编程方式修改元素：在 CSS 规则之前

Posted 2023-03-06

【中文标题】在 React 中以编程方式修改元素：在 CSS 规则之前

【英文标题】：Modify element :before CSS rules programmatically in React

【发布时间】：2017-07-25 22:28:56

【问题描述】：

我有一个元素，其:before 样式必须根据计算进行修改。

export class Content extends React.Component 
    render() 
        return (
            <div className="ring-base">
               <div className="ring-left" style=/* Change here */></div>
               <div className="ring-right" style=/* Change here */></div>
               <div className="ring-cover">
                   <div className="ring-text">10%</div>
               </div>
            </div>
        );
    

CSS 代码：

.ring-base 
    position: absolute;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    background: red;
    transform: rotate(90deg);
    overflow:hidden;

.ring-cover 
    position: absolute;
    height: 180px;
    width: 180px;
    background: #fff;
    border-radius: 50%;
    top: 5%;
    left: 5%;


.ring-cover .ring-text 
    position: absolute;

    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 2em;
    display: flex;
    justify-content:center;
    align-content:center;
    flex-direction:column;
    transform: rotate(-90deg);


.ring-right, .ring-left 
    height: 100px;
    width: 200px;
    overflow: hidden;
    position: absolute;  


.ring-right:before, .ring-left:before 
    height: inherit;
    width: inherit;
    position: absolute;
    content: "";
    border-radius: 100px 100px 0 0;
    background-color: grey;
    transform: rotate(0deg);


.ring-right 
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    transform: rotateZ(0deg);


.ring-left 
    transform: rotate(180deg);
    -webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    transform-origin: 50% 100%;


.ring-right:before 
    -webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    transform: rotate(0deg);


.ring-left:before 
    -webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);

要求能够通过 ReactJS 更新 .ring-left:before 和 .ring-right:before 的转换属性。

如果有办法不更新 :before 类并将 CSS 更改为根本不使用 :before，那么也建议这样做。

Js-Fiddle

【问题讨论】：

创建新标签<style>并将您的计算作为内容，附加到head或body

见***.com/a/27255808

@Justinas 您指的是危险地设置 html 吗？这是我应该尝试的吗？ (medium.learnreact.com/…)

@guest271314 我不知道如何在 React 中使用 Jquery。有没有非 JQuery 的方式？

@ManmeetS.Oberoi 为什么你认为动态设置 HTML 很危险？

【参考方案1】：

您可以迭代document.styleSheets，设置.style 的.cssRules 其中.selectorText 匹配伪选择器

let sheets = document.styleSheets;
let selector = "div::before";
let replacementContent = '"after"';
for (let sheet of sheets) 
  for (let rule of sheet.cssRules) 
    if (rule.selectorText === selector) 
      rule.style["content"] = replacementContent;
    
  

div:before 
  content: "before";
  color: red;
  font-weight: bold;
  text-align: center;
  text-shadow: 2px 2px 2px #000;
  background: green;
  width: 50px;
  height: 50px;
  display: block;

<div></div>

【讨论】：

哇，这太棒了。保存为书签，将来可能会派上用场。

这可以解决问题并按预期工作。谢谢。如果可能，请建议一种反应方式来复制相同的内容。

@ManmeetS.Oberoi 不确定什么是“反应方式”。在CSSStyleSheet 加载的答案集属性document 的方法。

这是遍历添加到项目中的所有样式表然后搜索选择器的暴力方式。如果我们可以添加一个支持伪元素的动态生成类，然后将其添加到特定的组件中。

@ManmeetS.Oberoi 您可以切换元素的.className 以将css 伪元素规则应用于类。或者，添加、删除具有.className 的元素，其中伪元素设置为css。本题询问如何修改现有的css::before伪元素规则。