How to use CSS breakpoints with Material UI, how to use breakpoints in makeStyles or withStyles, use media query in Material UI

CSS media query (breakpoints) in Material UI

Written By: Mohamed Atef

Published: 2021-10-21 | Comments: 0 | Category: React js

Theme breakpoints in withStyles 

the best way to use the media queries or breakpoints in your code is using the default Material UI breakpoints like this 

Class component

import React from 'react';
import { withStyles } from '@material-ui/core';
const styles = (theme) => ({
	root:{
		 backgroundColor: '#000',
		 [theme.breakpoints.up('md')]:{
			maxWidth: '800px', 
		 },
		 [theme.breakpoints.down('md')]:{
			maxWidth: '90%', 
		 },
	}
});

class Homepage extends React.Component {
	render(){
		const { classes } = this.props;
		
		return(
			<div className={classes.root}>
				
			</div>
		);
	}
}
export default withStyles(styles)(Homepage);

And in the functional component, you do the same thing but using a function called makeStyles to be like this 

import React from 'react';
import { makeStyles } from '@material-ui/core';

const useStyles = makeStyles(() => ({
  root: {
  		 backgroundColor: '#000',
		 [theme.breakpoints.up('md')]:{
			maxWidth: '800px', 
		 },
		 [theme.breakpoints.down('md')]:{
			maxWidth: '90%', 
		 },
  }
}));
const Homepage = () => {
	  const classes = useStyles();
	  return (
	  		<div className={classes.root}>
				
			</div>
		);
}
export default Homepage;

Custom media query in Material UI

to make. your custom media query into the functions makeStyles or withStyles you will do it like this 

import React from 'react';
import { withStyles } from '@material-ui/core';
const styles = (theme) => ({
	root:{
        	['@media screen and (min-width: 1500px)']:{
            	maxWidth: '675px'
        	},
        	['@media screen and (min-width: 1200px) and (max-width: 1500px)']:{
            	maxWidth: '580px'
        	},
        	['@media screen and (min-width: 1000px) and (max-width: 1200px)']:{
            	maxWidth: '480px'
        	},
	}
});

class Homepage extends React.Component {
	render(){
		const { classes } = this.props;
		
		return(
			<div className={classes.root}>
				
			</div>
		);
	}
}
export default withStyles(styles)(Homepage);

but the way above can return some warnings, it will be working fine but in some Reactjs versions it will be called like useless media query however the users and developers will be able to watch the effect and it will be working fine so there is only one more way by using regular CSS files and no problem or warnings in this way

import React from 'react';
import { withStyles } from '@material-ui/core';
import './styles.css';
const styles = (theme) => ({
	root:{
		backgroundColor: '#000',
	}
});

class Homepage extends React.Component {
	render(){
		const { classes } = this.props;
		
		return(
			<div className={classes.root} id="custom-homepage-root">
				
			</div>
		);
	}
}
export default withStyles(styles)(Homepage);

in style.css

@media screen and (min-width: 1500px){
    #custom-homepage-root { max-width: 675px; }
}
@media screen and (max-width: 1000px){
    #custom-homepage-root { max-width: 375px; }
}

that's all, & maybe in the feature there will be more ways of styling, if you have any questions please let me know in the comments below, Good Luck

Comments

There is no comments yet

Leave a comment

Join us

Join our community and get the chance to solve your code issues & share your opinion with us

Sign up Now

Related posts

Hide errors in live website Reactjs
Publish date: 2022-03-31 | Comments: 0

Tag: React js

Deploy Reactjs using Azure
Publish date: 2021-07-31 | Comments: 0

Tag: React js

Auto complete Google addresses API (Reactjs, Material UI, Formik)
Publish date: 2021-07-03 | Comments: 2

Tag: React js

Show CSV file in web page using Reactjs
Publish date: 2021-10-20 | Comments: 0

Tag: React js

Display PDF in Reactjs from Authenticated API
Publish date: 2022-02-14 | Comments: 0

Tag: React js