Можно ли проверить пользовательские атрибуты данных в css -in- js?

Question

Я пытаюсь ссылаться на атрибуты данных из 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;

Answer 1

Это интересный случай. Что вы можете сделать:

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

Предполагается, что установлен плагин JSS @global, но я думаю, что это очень полезно иметь. Подробнее о плагине @ global - здесь

И если вы хотите обратиться к атрибуту data- , как в отредактированном примере 0 вы должны сделать:

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

И в разметке у вас будет (в зависимости от способа извлечения класса):

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

... стили для пользовательских данных будут быть примененным выше.

Способ, которым вы написали в своем последнем редактировании, не будет работать. Вы должны добавить немного, хотя. Для работы с примером кода, который вы предоставили:

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

& требует настройки подключаемого модуля - здесь больше об этом.

Answer 2

Благодаря потрясающей поддержке @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;

Answer 3

Если ваш JS выглядит так:

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

Ваш CSS будет выглядеть так:

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