Question

我有一个简单的div，其中嵌套了其他三个div，每个嵌套的div都有一个id。我在用useStyles（）中的id访问这些div时遇到麻烦。这是我的组件：

import { useStyles } from "./components/Styles/Styles";

export const CountDown = () => {
   const classes = useStyles();

   return(
      <div className={classes.countDown}>
        <div id="hour">NA</div>
        <div id="minute">NA</div>
        <div id="second">NA</div>
      </div>
   )
}

这是useSyles（）

export const useStyles = makeStyles({
   countDown: {
      "& #hour:before": { //not working like this
         content: "Hours",
      },
   }
})

Answer 1

您需要使用::

Working demo

代码段：

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      "& > *": {
        margin: theme.spacing(1),
        width: "25ch"
      }
    },
    countDown: {
      "& #hour": {
        background: "red"
      },
      "& #minute::before": { //<------ like this
        content: '"Minute"',
      }
    }
  })
);

通过material-ui useStyles（）中的id访问元素

1 个答案: