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

Question

当前，我正在尝试使用材质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>

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

Answer 1

伪选择可以与材料ui类一起使用。

content: {
display: "flex",
"&::before": {
  content: '""',
  boxShadow: "0 0 6px 1px #ccc"
},

要将伪选择器添加到类中，只需在伪选择器字符串后附加“＆”即可。