IT技术 - 在 React 中以编程方式修改元素：在 CSS 规则之前 - 吾爱随笔录

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

IT技术 javascript css reactjs

2021-04-04 10:08:20

我有一个元素，其: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);

}

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

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

Js-小提琴

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>

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

2021-05-30 10:08:20

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

2021-06-04 10:08:20

哇，这个真不错。保存为书签，这在未来可能会派上用场。

2021-06-06 10:08:20

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

2021-06-08 10:08:20

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

2021-06-21 10:08:20

其它你可能感兴趣的问题

上一篇在 render() 函数中定义函数组件是一种反模式吗？下一篇ReactJs 浏览器无法读取未定义的属性“键”