如何在React Material-UI的makeStyles中为子元素添加::after伪类样式

问题原因 #

你使用Material-UI的makeStyles（基于JSS语法）书写嵌套选择器时规则错误：
JSS语法中&指代当前层级的选择器，你已经进入了'& dt'的选择器上下文，此时内层再写'& dt::after'最终生成的CSS选择器会变为.dlist dt dt::after，没有匹配的DOM元素，因此样式不生效。

正确实现代码 #

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    dlist: {
      '& dt': {
        float: 'left',
        // 此处&直接指代当前的dt选择器，拼接::after即可匹配目标元素
        '&::after': {
          content: '":"',
        },
      },
    },
  }),
);

const Report = (props: any) => {
  const styles = useStyles();
  return (
    <dl className={styles.dlist}>
      <dt>JPY</dt>
      <dd>100</dd>
      <dt>USD</dt>
      <dd>1</dd>
    </dl>
  )
}

内容的提问来源于stack exchange，提问作者Wt.N