Как вы применяете псевдоселекторы для css, используя реквизиты стиля материала? - PullRequest
Новая
       1

Как вы применяете псевдоселекторы для css, используя реквизиты стиля материала?

1 голос
/ 24 февраля 2020

В настоящее время я пытаюсь применить псевдоселектор, используя материальный объект в стиле UI. Стили в настоящее время применяются с методом с исключением псевдоэлемента.

styles.jsx - 

const SBoxMain = {
  display:"inline-block",
  margin:"0px 5px",
  hover: {backgroundColor: "yellow"}
}

Component.jsx - 

<Box style={SBoxMain} id="Other" onClick={e => filterType("Other")}>
  <Box style={SBoxTile}>
    Other
  </Box>
</Box>

Хотя приведенный выше код не выдает никакой ошибки, псевдоэлемент logi c не применяется к HTML. Как мне реализовать logi c для :: after и: hover соответственно?

1 Ответ

0 голосов
/ 27 февраля 2020

Я изменил подход после предложений в комментариях использовать модульную таблицу стилей с псевдоселекторами.

Новый подход: - импортировать таблицу стилей в компонент реагирования - ссылочный класс в объекте классов пользовательского интерфейса материала. 

<Box classes = {{root:'options'}}>
.options {
  position: absolute;
  top: 25px;
  left: 50%;
  min-width:200px;
  background-color: #fff;
  border: solid 1px #989898;
  padding-top:15px;
}

.options::before{
  transform: rotate(45deg);
  position: absolute;
  background-color:#fff;
  width: 10px;
  height: 10px;
  border-top: 1px solid #000;
  border-right: 0px solid #000;
  border-bottom: 0px solid #000;
  border-left: 1px solid #000;
  top: 0%;
  left: 50%;
  margin-top: -6px;
  margin-left: -5px;
  content: "";
}
import '../Styles/FilterBarSecondary.css';
...