CODEWITHSUNDEEP
reactjscss-selectorsmaterial-ui
Wt.N
Wt.N

Reputation: 1658

React Material-UI child class pseudo

Does anybody know how to add ::after in child element?

CSS I expect to run:

dt {
  float: left;
}

dt::after {
  content: "："
}

My code. ::after doesn't work well.

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>
  )
}

Upvotes: 0

Views: 61

Answers (1)

AnsonH
AnsonH

Reputation: 3335

You are nesting & dt::after inside & dt. Since the ampersand (&) is evaluated to be the parent selector of & dt::after, it will be evaluated to dlist dt dt::after, which fails to select any elements.

Instead of nesting the & dt::after object inside & dt, try moving the object out of & dt:

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

Upvotes: 1

Related Questions