Dynamically calculate value in styling material-UI

Question

I am using Material-UI style to set class .

Now I want to set height according to browser width .

Is it possible to calculate dynamically in makeStyles() or some work-around??

This is the code what I want.

const useStyles = makeStyles({
 videoContainer:{
    height: this.width / 16 * 9 // dynamically calculate height
  }
}

const Info = (props) => {
  const classes = useStyles();
  const { ...rest } = props;
  return (
    
    <div class={classes.videoContainer}>
    <video src={require("assets/180226.mp4")} 
        autoPlay muted loop>
    </video>
    </div>
  );
}

Answer 1

Yes you can set height dynamically inside makeStyles()

const useStyles = makeStyles({
 videoContainer:{
    height: window.innerWidth / 16 * 9 // dynamically calculate height
  }
}

Or You can set a variable at beginning and use it inside makeStyles()

const ht = window.innerHeight // do some calculation
const useStyles = makeStyles({
 videoContainer:{
    height: `${ht}`
  }
}