Transforming CSS styles into Material UI's makeStyles

My CSS styling was originally like this

const Root = styled.div`
  display: flex;
  flex-direction: row;
  margin: 0 auto;
  width: 100%;
  position: relative;

  @media (min-width: ${(p) => p.theme.screen.md}) {
    width: ${(p) => p.theme.screen.md};
// p.theme.screen.md is 1007px
  }

  @media (min-width: ${(p) => parseInt(p.theme.screen.lg, 10) + 20 + 'px'}) {
    width: ${(p) => p.theme.screen.lg};
// p.theme.screen.lg is 1100px
  }
`;

I am trying to convert this to Material UI makeStyles CSS and have made some progress:

const useStyles = makeStyles((theme) => ({
  root: {
    display: 'flex',
    flexDirection: 'row',
    margin: '0 auto',
    padding: '20px',
    width: '100%',
    position: 'relative',
  },
}));

I'm having trouble understanding how to replicate those @media queries (mixins) in Material UI. Can someone please provide guidance? (Please avoid sharing documentation links as I've already reviewed them and couldn't grasp the concept)

Answer №1

Incorporate the breakpoints specified in the theme object to apply styles according to width

const useStyles = makeStyles((theme) => ({
root: {
    display: 'flex',
    flexDirection: 'row',
    margin: '0 auto',
    padding: '20px',
    width: '100%',
    position: 'relative',
    [theme.breakpoints.up('md')]: {
        // Specify width value for md breakpoint
        width: theme.breakpoints.width('md')
    },
    [theme.breakpoints.up('lg')]: {
        // Specify width value for lg breakpoint
        width: theme.breakpoints.width('lg')
    },

}}));

up -> minWidth, down -> maxWidth

Here are the default breakpoints:

xs extra-small: 0px, sm small: 600px, md medium: 960px, lg large: 1280px, xl extra-large: 1920px,

Edit: To update the default breakpoint theme values, follow these steps:

Pass the breakpoints object with values as shown below in your theme object provided to the ThemeProvider

const theme = {
  ...
  breakpoints: {values: {xs: 0, sm: 600, md: 1007, lg: 1100, xl: 1920}}
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Seeking to achieve perfect vertical alignment of two columns within zurb foundation

I'm currently working with Zurb Foundation alongside Sass Compass, though this issue can extend to any CSS framework. Here's an example of the code I have: <div class="row"> <div class="small-6 column">...</div> <di ...

React component created as a constant

I currently have a js file that contains routes for my menu. menuConstant.js import PeopleIcon from '@material-ui/icons/People' export const routers = [ { title: 'Clients', to: '/clients', icon: PeopleIcon, // f ...

Is it possible to create a fading effect on an image using a border-radius of 50%?

Struggling with fading out an image that's circular in shape due to the border-radius: 50%. <section id="main"> <h1>Non-Important-Text</h1> <h4> it's all fun and games until you can't find a damn sol ...

implementing a collapsible sidebar menu with CSS tables

I am working on a layout with three columns created using css tables to perfectly fit the browser window. The first column serves as a menu and I want it to hide or move to the left when clicked, allowing the middle column to expand into its space. However ...

Alignment of UI Divs with CSS Bootstrap and HTML

I am facing an issue with two divs in my UI. One div has a label, and the other contains a file selector. Currently, they are stacked vertically instead of being side by side. https://i.stack.imgur.com/fIz03.png How can I align these divs horizontally wit ...

Ways to acquire outcome from the form element

Just starting out with React and working on a code snippet to handle database insertion using React Query. import { API_ENDPOINTS } from '@framework/utils/api-endpoints'; import http from '@framework/utils/http'; import { useMutation } ...

Chrome's CSS columns cannot contain iframes without causing them to escape their

I'm currently attempting to incorporate Iframes within a 3-column grid. HTML <div id="blogPosts"> <div class="blogPost"> <iframe width="100%" src="https://www.youtube.com/embed/YqeW9_5kURI" frameborder="0" allowfullscre ...

Allow one child to be visible even if the parent container has hidden overflow (or a different setting)

Is there a way to achieve the same look as shown in this example, but without repeating the border-radius code for the div.left in the CSS? It feels redundant and I suspect my approach may not be optimal. If you have any suggestions on how to accomplish t ...

Accessing data for a Relay query fragment from an external database

Struggling with setting query variables in a GraphQL query fragment within a RelayContainer, especially when the input data is from an external source like a Redux store. The documentation provides the basics, but due to the static nature of the queries an ...

Detecting browser reload in React/Typescript: A guide

Is there a way to determine if the browser has been reloaded? I've explored various solutions, but most suggest using code like this: const typeOfNavigation = (performance.getEntriesByType("navigation")[0] as PerformanceNavigationTiming).type ...

The toggle function for the classList ('open') is functioning correctly and can be seen in the inspect element tool, however, the website is not displaying the associated style

How can I make the .nav show styles in .open after clicking #menu-icon? Note: I used Bootstrap to create the nav HTML <!-- logo --> <div class="logo"> <img src="assets/logo.png" alt="logo g's shop& ...

How do I find out the properties of individual components in Material UI?

Learning material ui has been a challenge for me as I struggle to figure out the properties available for each component. For instance, in a tutorial on YouTube, they used the AppBar component like this: <AppBar title="Enter user details" /> But ho ...

What is the best way to send the input text to the filter component in my React application?

I am currently working on developing an application utilizing the "Rick and Morty API" to display a list of characters with various attributes such as gender, alive status, images, etc. My main goal is to implement a search bar that allows users to search ...

When using NextJs with Material UI, manually refreshing the page may trigger a warning message stating: "Prop `className` did not match. Server: `MuiTypography-root MuiLink`."

In my Next.js project with Material UI, I am facing an issue where hot reloading works fine when I make changes and run the server. However, if I manually refresh the page, all the styles get messed up and I receive a warning saying: Warning: Prop classNam ...

What can I do to prevent my HTML/CSS/jQuery menu text from shifting when the submenu is opened?

After encountering numerous inquiries regarding the creation of disappearing and reappearing menus, I successfully devised a solution that functions seamlessly on desktop and tablet devices. My approach involved utilizing the jQuery .toggleClass function w ...

Strange occurrences with HTML image tags

I am facing an issue with my React project where I am using icons inside img tags. The icons appear too big, so I tried adjusting their width, but this is affecting the width of other elements as well. Here are some screenshots to illustrate: The icon wit ...

Is there a way to replace my website's link colors using classes?

Struggling to change the default link colors on my site. Despite researching similar issues, I can't seem to make it work. This is how I've set the base link colors: a:link, a:visited, a:hover { color: #0279aa } Below is my style override for ...

Struggling to display a collection of items in React

Below is the code snippet : import React, { Component } from 'react'; import axios from 'axios'; import _ from 'lodash'; import Loader from './Loader'; export default class Main extends Component { constructor(p ...

Proper method for incorporating loading and error messages with the help of useContext and react hooks

Currently, I have a context.js file that makes an ajax call and stores the data in an array to be shared across components. While adding some 'loading ...' text during the loading process using axios, I feel there might be a better way to handle ...

Tips for minimizing the height of the Material Toolbar in Material-UI

I'm looking to customize the height of the toolbar in Material-UI to make it smaller Although I checked out How do I change the Material UI Toolbar height?, I am still struggling with this issue Increasing the height above 50 seems to work, but redu ...