Adjusting various settings on breakpoints in MUI v5

Previously in MUI version 4, I was able to apply multiple style parameters within a single media query using the following code:

 [theme.breakpoints.up('xs')]: {
      width: 100px,
      color: green,
    },
 [theme.breakpoints.up('md')]: {
      width: 400px,
      color: blue,
    },

Now, in MUI version 5, I have the option to set these styles individually on a component using the sx prop, which is quite convenient:

...
sx={{
  width: {xs:'100px', md:'400px'},
  color: {xs: 'green', md:'blue'}
}}

However, I would like to achieve the same functionality as in version 4, where multiple parameters can be adjusted under a single breakpoint. It seems that the control has been inverted now, and while this can be helpful, I also want to use the original approach. Is there a way to do this in MUI v5?

Answer №1

This solution seems to be effective for my needs.

import { useTheme } from '@mui/material/styles';

...

function MyCustomComponent() {
  const theme = useTheme();

...

sx={{
 [theme.breakpoints.up('xs')]: {
      width: 100px,
      color: red,
    },
 [theme.breakpoints.up('lg')]: {
      width: 500px,
      color: purple,
    },
}}

Answer №2

I've discovered a solution.

By utilizing the callback feature, it's feasible to configure it just like in version 4.

    <Box
      sx={[
        { // Include parameters for all sizes 
          display: 'flex',
          backgroundColor: {
            // Responsive parameters can also be mixed here
            xs: 'yellow',
            md: 'purple'
        },

        // Add responsive parameters
        (theme) => ({
          [theme.breakpoints.between('xs', 'md')]: {
            color: 'blue',
            border: '2px solid red',
          },
          [theme.breakpoints.up('md')]: {
            color: 'green',
            border: '2px solid purple',
          },
        }),
      ]}
    >

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

Transforming Button style in jQuery Mobile version 1.3.0

There are reports of a new function in jQuery Mobile 1.3.0 that allows for dynamically changing button themes using JavaScript: http://jquerymobile.com/blog/2013/02/20/jquery-mobile-1-3-0-released/ However, upon attempting to run the provided code snippe ...

Retrieving the current date in React from a distinct date format

Does anyone know how to retrieve today's date in the following format using React? "2019020420" I have a function that currently retrieves the current date. How can I modify it to output the desired date format shown above? getCurrentDate( ...

Utilizing logic classes in conjunction with styled components

I am seeking a way to utilize this logic in order to assign the appropriate class to an element: <ul onClick={handleClick} className={click ? 'dropdown-menu clicked' : 'dropdown-menu'}> However, as I am employing styled component ...

Error in React Bootstrap: ReferenceError - 'openModal' is not defined

Whenever the button is clicked, my intention is for a modal to open. I have written the code for it, but I'm encountering errors that I can't seem to resolve. Here's the snippet of my code: import React from "react"; import { M ...

What is the procedure for inputting the settings for the export module in webpack?

I am currently working on setting up this webpack configuration file. However, I encountered an issue where the error message states that "any" is being used as a value instead of a type. How can I resolve this issue? module.exports:any = { ...

How can I stop inputs from blurring when a user navigates away from a page?

I'm currently working on a project using next.js 13 and I'm looking to create interactive authentication forms. One of the features I've implemented is a form that displays the input label above it when focused, acting like a placeholder onc ...

"Next JS throws an error stating that 'window' is not defined

Need some assistance here. I've been attempting to implement react-wysiwyg-editor in my next js app, but keep encountering an error stating that 'window is undefined.' import React, { useState } from "react"; import { Editor } from ...

The loading indicator fails to appear when navigating to a different page

I recently started using Next.js and have set up 3 pages: index.js categories/index.js categories/[slug].js To enhance the user experience, I decided to incorporate the library called NProgress, which displays a loading line at the top of the viewport wh ...

The battle of line-height versus padding for achieving vertical centering with one-lined text

One-lined text can be vertically centered using either the line-height property or by adding padding-top and padding-bottom. What are the advantages and disadvantages of each method? body { font-size: 12px; font-family: ...

React and Axios: Overcoming CORS Policy to Connect with Java/SpringBoot REST Backend Service

As a first-time user of Axios to connect to my Java/SpringBoot Rest GET service on localhost:8080, I am using React and node.js. My goal is to successfully retrieve the REST data but encountered the following error: Failed to compile src\App.js Lin ...

"Enhance your online shopping experience with a React.js popup modal for

In the midst of developing a shopping cart, I find myself facing a challenge in making the modal pop up when clicking on the shopping cart icon. The semantic-ui documentation for modals has not provided clear instructions on achieving this functionality, s ...

What is the best way to showcase a set of paired arrays as key-value pairs?

Currently, I am developing a client in React that is responsible for receiving streaming data that represents objects from the back end. The client's task is to parse this data and dynamically construct the object as a JavaScript data structure, typic ...

Leveraging the Google Search API to exclusively retrieve search results from specific websites

Currently, I'm in the process of creating a React application that integrates with the Google Search API to allow users to specify websites from which they want their search results generated. However, I have encountered an issue when attempting to re ...

What is the best way to update a route or component in React without having to reload the entire page after fetching new data

After making changes to my data in the database, such as deleting or updating it, I find that I need to reload the page in order to see the updated data in the current component. Is there a way for me to see my updated data without having to refresh the ...

Creating a circular frame for your image to use as a Facebook profile picture

In the process of developing an input feature that allows users to upload file images for avatar changes, similar to Facebook's functionality. However, I am aware that Facebook utilizes a circular area for avatars and enables users to adjust the image ...

The issue of "localstorage is not defined" in Next.js getStaticProps may

I am encountering an issue where I have stored the user ID in local storage and now I am trying to access it within the getStaticProps function in order to fetch the subscribers of the current user. However, I keep getting an error message that says Local ...

Error: The 'book' property is undefined and cannot be read in the BookDetails.render function

I am currently working on retrieving data from renderList and implementing it in render(). Upon using console.log this.renderList() https://i.stack.imgur.com/IwOzw.png The retrieved data is displayed above. While working on the render(), I attempted ...

Ensure the first column is fixed and all other columns have the same height

I have encountered an issue where the first column of my table has varying heights compared to the other columns, resulting in inconsistent row heights. Below is the code I am using: <div class="outer"> <div class="inner"> <table> ...

Having difficulty retrieving data despite providing the correct URL

I am encountering an issue with a fetch function designed to retrieve a JSON web token. Despite verifying the correctness of the URL, the function is not functioning as expected. Below is the front-end function: const handleSubmit = async (e) => { ...

React Component: Issue with conditional "if else" statement not refreshing in return statement

Starting out in React and the front-end field with minimal experience. Currently attempting to dynamically change the color of the "fill" property in a polygon element using React. If the percentage is greater than 50, I want the color to be green; otherw ...