javascript - 是否可以在css-in-js中测试自定义数据属性？

我正在尝试从JSS引用数据属性，对其进行测试，并在测试正确的情况下应用样式。但是，当我运行下面的代码时，它不适用“ color：green”，我也不知道为什么！

import React from "react";
import { createUseStyles } from "react-jss";

const useStyles = createUseStyles({
  statusDiv: {
    backgroundColor: "lightGrey",
    padding: "10px",
    fontWeight: "bold",
    '[data-status="OPEN"]': {
      // no effect ..?
      color: "green",
    },
  },
});

const App = () => {
  const classes = useStyles();

  return (
    <div data-status="OPEN" className={classes.statusDiv}>
      OPEN
    </div>
  );
};

export default App;

最佳答案

这是一个有趣的案例。
您可以做的是：

export default {
  '@global' : {
      'div.testClass[data-custom="value"]': {
      color: 'red',
      border: '1px, solid navy'
    }
  }
}

假设安装了@global的JSS插件，但这对我来说很有用。
有关插件@global的更多信息-here

而且，如果您要像在编辑后的示例0中那样处理数据属性，则应该执行以下操作：

testClass: {
  '[data-custom="value"]': {
    //styles for the custom data
  }
}

在标记中（取决于提取类的方式）：

testClass.classes['[data-custom="value"]']

...定制数据的样式将由上述方法应用。

您在上次编辑中编写的方式无效。您应该添加一点点。要使用您提供的代码示例，请执行以下操作：

...
fontWeight: "bold",
  '& [data-status="OPEN"]': {
  // no effect ..?
  color: "green",
},

＆需要嵌套插件设置-here对此有更多介绍。