CODEWITHSUNDEEP
reactjsmaterial-ui
OmidJr
OmidJr

Reputation: 133

Access element by id in material-ui useStyles()

I have a simple div with three other divs nested inside of it, and each nested div has an id. I'm having trouble accessing these divs by their ids in useStyles(). here is my component:

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

and this is useSyles()

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

Upvotes: 1

Views: 3647

Answers (1)

gdh
gdh

Reputation: 13682

You need to use ::

Working demo

Code snippet:

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

Read more here

Upvotes: 2

Related Questions