title: Media Queries in Material-UI Using Styled-Components
body: <p>Material UI has a nice set of built-in media queries:  <a href="https://material-ui.com/customization/breakpoints/#css-media-queries" rel="noreferrer">https://material-ui.com/customization/breakpoints/#css-media-queries</a></p>
  
  <p>Material UI also allows us to use Styled-Components with Material UI:  <a href="https://material-ui.com/guides/interoperability/#styled-components" rel="noreferrer">https://material-ui.com/guides/interoperability/#styled-components</a></p>
  
  <p>I want to know how to combine the two together.  That is, how can I make media queries using Styled Components and Material-UI's built-in breakpoints?</p>
  
  <p>Thanks.</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>Here is an example of what I am trying to do:</p>
  
  <pre><code>import React, { useState } from 'react'
  import styled from 'styled-components'
  
  
  import {
    AppBar as MuiAppBar,
    Drawer as MuiDrawer,
    Toolbar,
  } from '@material-ui/core'
  
  
  const drawerWidth = 240
  
  const AdminLayout = ({ children }) =&gt; {
  
    return (
      &lt;BaseLayout&gt;
        &lt;AppBar position="static"&gt;
          &lt;Toolbar&gt;
            TOOLBAR
          &lt;/Toolbar&gt;
        &lt;/AppBar&gt;
        &lt;Drawer&gt;
          DRAWER
        &lt;/Drawer&gt;
        {children}
      &lt;/BaseLayout&gt;
    )
  }
  
  AdminLayout.propTypes = {
    children: PropTypes.node.isRequired,
  }
  
  export default AdminLayout
  
  // ------- STYLES -------
  const AppBar = styled(MuiAppBar)`
    /* Implement appBar styles from useStyles */
  `
  
  const Drawer = styled(MuiDrawer)`
    /* Implement drawer styles from useStyles */
  `
  
  // STYLES THAT I WANT TO CONVERT TO STYLED-COMPONENTS
  const useStyles = makeStyles(theme =&gt; ({
    root: {
      display: 'flex',
    },
    drawer: {
      [theme.breakpoints.up('sm')]: {
        width: drawerWidth,
        flexShrink: 0,
      },
    },
    appBar: {
      [theme.breakpoints.up('sm')]: {
        width: `calc(100% - ${drawerWidth}px)`,
        marginLeft: drawerWidth,
      },
    },
    toolbar: theme.mixins.toolbar,
  }))
  </code></pre>