0

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

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;
4

3 回答 3

1

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

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

这假设安装了一个 JSS 插件 @global，但我认为这是非常有用的。更多关于插件@global -这里

而且，如果您想像在编辑的示例 0 中那样处理数据属性，您应该这样做：

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

在标记中您将拥有（取决于您提取类的方式）：

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

...自定义数据的样式将由上述应用。

您在上次编辑中编写的方式将不起作用。不过，您应该添加一点。要使用您提供的代码示例：

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

&需要一个嵌套插件设置 -这里有更多关于它的信息。

于 2020-04-25T15:32:16.440 回答
0

感谢@Vladyn 的大力支持，以下代码完美地展示了这一点：D

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

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

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

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;
于 2020-04-27T02:14:07.243 回答
0

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

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

您的 CSS 将如下所示：

.testClass[data-customAttribute="value"] {
  // your styles
}
于 2020-04-25T14:06:14.683 回答