title: How do i use props.theme.breakpoints with the makeStyles hooks?
body: <p>So I am trying to use the material breakpoints <a href="https://material-ui.com/customization/breakpoints/" rel="nofollow noreferrer">https://material-ui.com/customization/breakpoints/</a> given here along with the makeStyles hook. I am not able to use props.breakpoints.down('600') when trying to make responsive styling. How do I use breakpoints inside of the makeStyles hook ?</p>
  
  <pre><code>  bottom: '64px',
    height: '54px',
    backgroundImage: 'none',
    color: 'red'
  }
  </code></pre>
  
  <p>I've tried this but it just doesnt work.</p>
  
  <pre><code>export const useStyles = makeStyles({
    Container: {
      position: 'absolute',
      zIndex: '5',
      bottom: '0',
      paddingTop: ' 1%',
      left: ' 0',
      zIndex: '10',
      width: '100vw',
      backgroundImage: 'linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(45, 49, 55, 0.81))',
      display: 'block',
      // height: "74px"
      height: props =&gt; props.captionHeight,
      [props =&gt; props.breakpoints.down('600')]: {
        bottom: '64px',
        height: '54px',
        backgroundImage: 'none',
        color: 'red'
      }
    }});
  
  I expect to be able to have apply the styles when the screenwidth is lesser than 600px using the material-ui breakpoints api.
  </code></pre>