如何使用材质样式道具为CSS应用伪选择器？

Question

目前，我正在尝试使用材质UI样式prop对象来应用伪选择器。目前，样式是通过排除伪元素的方法来应用的。

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>

虽然上面的代码没有引发任何错误，但是没有伪元素逻辑应用于HTML。如何分别为:: after和：hover实现逻辑？

Answer 1

我在评论中的建议后更改了方法，以使用带有伪选择器的模块化样式表。

[新方法：-将样式表导入react组件-材质ui类对象中的引用类。

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