我如何使用这种风格来反应... " class[attribute] " [编辑第2节]

Question

如果他有属性，我想自定义我的元素。。。

在纯css中，我只会使用：

<div class='something' data-test='4'></div>
...
.something[data-test] {
background-color: red;
}

但在react中，我无法转换此代码。。。

<div dataTest={0} className={classes.something} >
Lorem Ipsum
</div>
...
something: {
"&[dataTest]": {
backgroundColor: 'red',
}
}

那么，我错在哪里了？

附言：我也试过了：

"& [data-test]": {
"&.[data-test]": {

Answer 1

您需要使用className，而不是class。然后在CSS中：

.something[data-test="4"]  {
background-color: red;
}

Answer 2

这就是访问react中的数据属性的方法。这是的快速演示

return (
< >
<div className="test" data-id="4">
<h1>Hello dear world</h1>
</div>
</>
);

样式.css

.test {
border: 1px solid red;
}
div::before {
content: attr(data-id);
}