When trying to customize an element based on its attribute, the process is a bit different in React compared to pure CSS. Here's an example:
<div class='something' data-test='4'></div>
...
.something[data-test] {
background-color: red;
}
In React, you would need to adjust your code like this:
<div dataTest={0} className={classes.something} >
Lorem Ipsum
</div>
...
something: {
"&[dataTest]": {
backgroundColor: 'red',
}
}
If you encounter issues with the conversion, double-check your syntax and ensure that it matches the expected structure.
PS: Other attempted variations include:
"& [data-test]": {
"&.[data-test]": {