Tips for adjusting an @media css for a material-ui react component

After posting this inquiry about overriding a CSS property in a material-ui component, I received a helpful example. However, I encountered difficulty when attempting to set the height of the Toolbar component due to an overarching @media specification. My strategy involved creating a MuiTheme spec like this:

const theme = createMuiTheme({
    overrides: {
        MuiToolbar: {
            regular: {
               height: "32px",
               minHeight: "32px"
        }
    },
  }
});

Take a look at how the overridden CSS appears visually:

https://i.sstatic.net/nejGm.png

By using a hack and adding !important to the minHeight property, I was able to make it work. You can view a demonstration of this on codesandbox here: https://codesandbox.io/s/4xmr2j2ny9

I am curious to know the correct method for overriding an @media specification using MuiTheme.

cssreactjsmaterial-ui

Answer №1

Make sure to include it as shown below. Remember, the media query should be wrapped in single quotes.

 MuiToolbar: {
      regular: {
        backgroundColor: "#ffff00",
        color: "#000000",
        height: "32px",
        minHeight: "32px",
        '@media (min-width: 600px)': {
          minHeight: "48px"
        }
      },

You can also access the codesandbox here - https://codesandbox.io/s/q8joyrrrwj

Answer №2

Just wanted to share the updated solution for 

"@mui/material": "5.0.4"
. This code snippet is a combination of resources found at and insights from @jannnik's comment:

const defaultTheme = createTheme();

const theme = createTheme({
  components: {
    MuiToolbar: {
      regular: {
        backgroundColor: "#ffff00",
        color: "#000000",
        height: "32px",
        minHeight: "32px",
        [defaultTheme.breakpoints.up('sm')]: {
          minHeight: "48px"
        }
      },
   }
});

Answer №3

Using MuiThemeProvider is not required for v1.x of material-ui. Instead, we can utilize the higher-order component created by withStyles to seamlessly inject an array of styles into the DOM as CSS. Check out this functional example without modifying the @media annotation:

https://codesandbox.io/s/7klzx84z71

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

maximum distance a button can respond to in a CSS layout

I'm trying to figure out why my CSS button has such a large clickable area. Is there a way to reduce it? When I hover over the button, the clickable area extends beyond the text, which is not ideal. Any suggestions on how to fix this without altering ...

htmlcss

Thickness of Border in Bootstrap Cards

I've been attempting to include a thicker border around the entirety of my Bootstrap 4 card. Despite specifying a thicker border, nothing seems to change. Below is a snippet of the code I'm working with: <div class="container"> <di ...

cssbootstrap-4

React createElement function does not include string children when there are multiple children present within the inner HTML

Currently, I am utilizing React.createElement(...) to dynamically produce a basic react website using data from a JSON file. The JSON file consists of an array of JSON objects that represent elements and their respective children. An individual element&ap ...

cssreactjs

Struggling to make background image behave as desired in CSS

After spending hours scouring forums, I still haven't been able to solve this issue. I am trying to make one of my divs serve as the background for my entire website. Additionally, I want it to start from a specific point and not cover the entire pag ...

cssimagebackgroundpositioncover

Creating a Parent Container to Maintain the Height of the Tallest Offspring

I've been searching online for solutions, but so far I haven't found one that meets all the requirements. <div class="parent"> <div class="child1">I am 60px tall and always visible; my parent is 100px tall</div> <div ...

javascriptjquerycss

What is the best way to check the CSS attributes of a React component with react-testing-library?

I understand the philosophy behind the react-testing-library, but I am having difficulty implementing it with CSS properties. For instance, consider a basic toggle component that changes its background color when clicked: import React, { useState } from ...

cssreactjsreact-testing-library

What steps should I take to display a Material UI grid in React without triggering the warning about the missing unique key

In my current project, I am utilizing React and Material UI to display a grid. The grid's rows are populated from an array of data, with each row containing specific information in columns structured like this: <Grid container> {myData.map((re ...

javascriptreactjsmaterial-ui

Leveraging Flexbox and flexGrow in conjunction with Textfield

I am looking to use Flexbox to separate my components on the screen in a way that positions them correctly. I have 3 rows with textfields that need specific ratios related to the full width: row 1 : 2, 1, 1 row 2 : 1, 1 row 3 : 1, 1, 2 I attempted to ach ...

cssflexboxmaterial-ui

What is the best way to include a variable in the POST body of a request?

For my project, I'm currently working on developing a search and filter functionality using react and material-ui. The client-side search is already up and running smoothly. However, I'm facing a challenge when it comes to passing a text string i ...

reactjsmaterial-ui

Organizing an array of objects by weeks based on their start and end dates

I have a large array of objects that I need to work with. let objectsList = [ {name: 'Misha', surname: 'Borovuk', id: '1', createdProfile: '11/02/2022'}, {name: 'Karina', surname: 'Burba', ...

reactjssortingforeachgroup-bylodash

What methods can be used to assess the security risks posed by a third-party library implemented in a React JS application?

How can I ensure the security of third-party libraries added to my create-react-app with additional scripts? ...

javascriptreactjsnpmsonarqube

Encountering difficulties during the migration process from a JavaScript to a TypeScript React Component

I've encountered some challenges with configuring TypeScript in my project. Initially, I developed my application using plain JavaScript. However, eager to learn TypeScript, I decided to convert my JavaScript project into a TypeScript one. To achiev ...

javascriptreactjstypescriptvite

Utilizing Bootstrap CSS within Vue's scope

I'm attempting to integrate Bootstrap into a Vue component while ensuring that all CSS is scoped. My initial approach was as follows: <style scoped> @import "~bootstrap/dist/css/bootstrap.css"; @import "~bootstrap-vue/dist/bootstrap-vue.css"; & ...

csstwitter-bootstrapwebpackvue.jsvue-loader

The switch switches on yet another switch

Greetings everyone, Currently, I am in the midst of my exam project and creating a mobile menu. The functionality is there, but unfortunately, when closing the menu, it also triggers the search toggle which displays an unwanted div, becoming quite botherso ...

javascriptjqueryhtmlcss

In what way can an array be assigned to a new key within the same key along with additional objects?

My goal is to transform the existing key value into a new format within the same key. It may be difficult for me to explain clearly through words, but the following data will help clarify. The data is currently structured as follows: const sampelData = [{ ...

javascriptreactjsecmascript-6

Wordpress Issues with Displaying Arabic Text Correctly

The issue arises when displaying Arabic text in menus, both the top menu and main menu. The text appears distorted and unreadable, with characters like 2Ø®Ø§Ù†Ù‚Ø§Û showing up. However, in other areas of the page such as the body content, the ...

htmlcsswordpress

Encountering issues trying to display state value retrieved from an AJAX call within componentDidMount in React

I recently implemented an AJAX call in my React application using Axios, but I am a bit confused about how to handle the response data. Here is the code snippet that I used: componentDidMount() { axios.get('https://jsonplaceholder.typicode.com/us ...

javascriptarraysajaxreactjsstate

What is the best way to conditionally render table data in React JS using a loop?

Currently, I'm working on a project with React.js and facing challenges in iterating through a data array to selectively render elements based on each data node's properties. The dataset is structured as follows: var requests = [ {"id": ...

javascriptreactjstabular

Tips on successfully passing multiple keys and their associated HTML tag attributes in a React application

One of my links, specified with an a-tag, appears in this manner: <a href={ item.htmlReportUrl } target="_blank" rel="noopener noreferrer"> {item.htmlReportText}</a> The values for the href and the linktext are sourced from the following: ro ...

javascriptreactjs

React and React Router are causing the login screen layout to persistently display

The MUI Theme Provider I have includes a Layout with Dashboard and Order screens. Even though the user hits the '/' endpoint, the Login Screen should be displayed instead of the Layout. -App.js <ThemeProvider theme={theme}> <Router> ...

javascriptreactjsreact-routermaterial-uireact-router-dom