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

Question

如果是这样，语法是什么？例如：

JS：

<div customAttribute={value} className={classes.testClass}>
...

CSS-IN-JSS

testClass: {
   [testForCustomAttribute]: {
      //styles to apply if true
   }
}

Edit到目前为止的进展（尚不起作用）。我确定我缺少明显的东西，例如一两个导入...您可以从下面的代码中看到我正在尝试实现的目标不过。

import React from "react";
import { create } from "jss";
import { JssProvider, createUseStyles } from "react-jss";
import global from "jss-plugin-global";

const jss = create();
jss.use(global());

const useStyles = createUseStyles({
  "@global": {
    'div.statusDiv[data-status="OPEN"]': {
      color: "green",
    },
    'div.statusDiv[data-status="CLOSED"]': {
      color: "red",
    },
  },
  statusDiv: {
    backgroundColor: "lightGrey",
    padding: "10px",
    fontWeight: "bold",
  },
});

const App = () => {
  const classes = useStyles();
  const status = "OPEN";

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

export default App;

Answer 1

如果您的JS看起来像这样：

<div data-customAttribute={value} className={classes.testClass}></div>

您的CSS外观如下：

.testClass[data-customAttribute="value"] {
  // your styles
}

Answer 2

这是一个有趣的情况。您可以做的是：

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

这假定已安装了@global的JSS插件，但这是我认为非常有用的东西。有关插件的更多信息@ global-here