import { makeStyles , Theme } from '@material-ui/core/styles' ; const useStyles = makeStyles ( ( theme ) => ( { root : { display : 'flex' , } , content : { flexGrow : 1 , padding : theme . spacing ( 3 ) , transition : theme . transitions . create ( 'margin' , { easing : theme . transitions . easing . sharp , duration : theme . transitions . duration . leavingScreen , } ) , marginLeft : `-${ process . env . REACT_APP_DRAWER_WIDTH }px` , } , contentShift : { transition : theme . transitions . create ( 'margin' , { easing : theme . transitions . easing . easeOut , duration : theme . transitions . duration . enteringScreen , } ) , marginLeft : 0 , } , toolbar : { display : 'flex' , alignItems : 'center' , justifyContent : 'flex-end' , padding : theme . spacing ( 0 , 1 ) , ... theme . mixins . toolbar , } , } ) ) ; export default useStyles ;