Reactjs React Material UI子类pseudo

有人知道如何在子元素中添加：：after吗

我希望运行的CSS：

dt{
浮动：左；
}
dt：：之后{
内容：“
}

我的密码<代码>：：after不起作用

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    dlist: {
      '& dt': {
        float: 'left',
      '& dt::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>
  )
}

const useStyles=makeStyles（（主题：主题）=>
创建样式({
数据列表：{
“&dt”：{
浮动：'左'，
“&dt:：在”：{
内容：“：”，
},
},
},
}),
);
const Report=（道具：任意）=>{
常量样式=使用样式（）；
返回(
日元
100
美元
1.
)
}

您正在嵌套

&dt:：在
&dt
内部。由于符号（
&
）被评估为
&dt:：after
的父选择器，因此它将被评估为
dlist dt:：after
，无法选择任何元素

不要将
&dt:：after
对象嵌套在
&dt
中，而是尝试将对象移出
&dt
：

const useStyles=makeStyles（（主题）=>({
数据列表：{
“&dt”：{
浮动：“左”
},
“&dt:：after”：{
内容：''：“'
}
}
}));
谢谢。我看不出你的代码和我的代码有什么区别。我把你的右大括号（
}，
）从第9行移到了第6行。这将删除
&dt:：after
内部
&dt
的嵌套，谢谢！我发现我的代码格式不正确。