import * as React from 'react' ; import mediaQuery from 'css-mediaquery' ; import { ThemeProvider } from '@material-ui/styles' ; import { createTheme } from '@material-ui/core/styles' ; example const DeviceTestWrapper = ( { width = 'md' , children , } ) : JSX . Element => { const theme = createTheme ( ) ; const ssrMatchMedia = query => ( { matches : mediaQuery . match ( query , { width : theme . breakpoints . width ( width ) , } ) , } ) ; return ( < ThemeProvider theme = { { ... theme , props : { MuiUseMediaQuery : { ssrMatchMedia } } } } > { children } < /ThemeProvider>); } ; export interface DeviceTestWrapperProps { width : 'md' | 'xs' | 'sm' | 'lg' | 'xl' ; children : JSX . Element ; } export default DeviceTestWrapper ;