React Material-UI child class 伪

React Material-UI child class pseudo

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

CSS 我希望 运行:

dt {
  float: left;
}

dt::after {
  content: ":"
}

我的代码。 ::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>
  )
}

您正在 & dt 中嵌套 & dt::after。由于与号 (&) 被评估为 select 或 & dt::after 的父代,因此它将被评估为 dlist dt dt::after,这无法 select 任何元素.

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

const useStyles = makeStyles((theme) => ({
  dlist: {
    "& dt": {
      float: "left"
    },
    "& dt::after": {
      content: '":"'
    }
  }
}));