Skip to content

Instantly share code, notes, and snippets.

@rofrol

rofrol/material-ui_responsive_img_src.md

Last active March 4, 2021 17:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rofrol/4f6819acbbf9be4303f3130159257dbf to your computer and use it in GitHub Desktop.
Save rofrol/4f6819acbbf9be4303f3130159257dbf to your computer and use it in GitHub Desktop.
Download ZIP
Raw
material-ui_responsive_img_src.md 
+import { useTheme } from '@material-ui/core/styles'
+import useMediaQuery from '@material-ui/core/useMediaQuery'

 const useAppBarStyles = makeStyles((theme) => ({
   root: {
@@ -25,6 +27,8 @@ const useToolbarStyles = makeStyles((theme) => ({
 function Header() {
   const appBarStyles = useAppBarStyles()
   const toolBarStyles = useToolbarStyles()
+  const theme = useTheme()
+  const upSm = useMediaQuery(theme.breakpoints.up('sm'))
 
   return (
     <AppBar position="static" classes={appBarStyles} elevation={0}>
@@ -32,12 +36,7 @@ function Header() {
         <Container>
           <Grid container spacing={2}>
             <Grid item>
-              <Box component="span" display={{ xs: 'block', sm: 'block', md: 'none', lg: 'none', xl: 'none' }}>
-                <img src={IconLogoNegativeSmall} alt='Logo' />
-              </Box>
-              <Box component="span" display={{ xs: 'none', sm: 'none', md: 'block', lg: 'block', xl: 'block' }}>
-                <img src={IconLogoNegative} alt='Logo' />
-              </Box>
+              <img src={upSm ? IconLogoNegative: IconLogoNegativeSmall} alt='Logo' />
+            </Grid>
             Search
         </Grid>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment