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

【问题标题】：How do you apply pseudo selectors for css using material style props?如何使用材质样式道具为 css 应用伪选择器？
【发布时间】：2020-06-08 12:13:27
【问题描述】：

目前我正在尝试使用材质 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 的逻辑？

【问题讨论】：

【解决方案1】：

伪选择可以与材质 ui 类结合使用。

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

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

【讨论】：