How to Over-Ride an @Media CSS for a Material-Ui React Component

Override an @media for material-ui react componentd doesn't work

Nevermind I found it

I need to put the keyword overrides

const theme = createMuiTheme({
  overrides: {
    MuiTabs: {
      scrollButtonsDesktop: {
        '@media (max-width: 599.95px)': {
          display: 'inline-flex',
        },
      },
    },
  },
});```

How to over-ride an @media css for a material-ui react component

You have to add it like below. The media query statement should be enclosed in single quotes.

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

Please find the codesandox - https://codesandbox.io/s/q8joyrrrwj

I try to override materialUI inbuilt classes using CSS file, styles are applying all the components in React how to stop overriding styles globally?

When you write global CSS like that, it gets applied to the whole document. Instead, you can take advantage of theming in @mui/material.
Use createTheme from @mui/material/styles to define the theme and ThemeProvider to apply that theme. And instead of using plain media queries, use theme breakpoints instead but you will have to specify the pixel values for these breakpoints yourself if you're not using the default ones. It can be done using theming as well.

import { createTheme } from "@mui/material/styles";
let theme = createTheme();
theme = createTheme(theme, {
  components: {
    MuiTableBody: {
      styleOverrides: {
        root: {
          "@media (min-width: 601px) and (max-width: 960px)": {
            // your styles here
          },
          [theme.breakpoints.between("md", "lg")]: {
            // use this instead
          }
        }
      }
    }
  }
});
export default theme;

In your component, wrap your Table component with ThemeProvider

import Table from "./components/Table";
import { ThemeProvider } from "@mui/material/styles";
import theme from "./theme/MuiTable"; // this is the theme you created above
...
const App = props => {
  return (
    <div className="App">
      <ThemeProvider theme={theme}>
        <Table />
      </ThemeProvider>
    </div>
  );
}

Here is a working demo

Material UI media queries base on container size

The best result for me was something like this:

import { useCallback, useState } from 'react';
import { useEffect, useLayoutEffect } from 'react';

const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;

export enum SizeTo {
    DOWN_TO = 'downTo',
    UP = 'up',
}

const getMatches = (el: HTMLElement | null | undefined, size: number, option: SizeTo): boolean => {
    // Prevents SSR issues
    if (typeof window !== 'undefined' && el) {
        if (option === SizeTo.DOWN_TO) {
            return el.offsetWidth <= size;
        }
        return el.offsetWidth > size;
    }
    return false;
};

function useContainerMediaQuery<T extends HTMLElement = HTMLDivElement>(size: number, option: SizeTo): [
    (node: T | null) => void,
    boolean,
] {
    const [ref, setRef] = useState<T | null>(null);
    const [matches, setMatches] = useState<boolean>(getMatches(ref, size, option));

    // Prevent too many rendering using useCallback
    const handleSize = useCallback(() => {
        setMatches(getMatches(ref, size, option));
    }, [ref?.offsetHeight, ref?.offsetWidth]);

    useIsomorphicLayoutEffect(() => {
        handleSize();

        // Listen matchMedia
        if (window) {
            window.addEventListener('resize', handleSize);
        }

        return () => {
            if (window) {
                window.removeEventListener('resize', handleSize);
            }
        };
    }, [ref?.offsetWidth]);

    return [setRef, matches];
}

export default useContainerMediaQuery;

partly extracted from useHooks

How to use Media queries with Material UI makestyles

You could use 50vh as your default height and then use theme.breakpoints.up(750) to change it to 80vh.

const useStyles = makeStyles((theme) => {
  return {
    root: {
      minWidth: 275,
      border: "3px solid black",
      borderRadius: "5px",
      boxShadow: "10px 5px 5px red",
      padding: 0,
      height: "50vh",                    // primary height
      overflow: "scroll",
      [theme.breakpoints.up(750)]: {
        height: "80vh"                   // secondary
      }
    },
    ...
  };
});

Edit aged-dust-tc6m5

How to override mui class?

This is how i ended up solving the issue:
In a seperate styles.js file:

assessmentPanelContent: {
    '&.MuiCardContent-root': {
      display: 'flex',
      padding: '0px',
      flexWrap: 'wrap',
      paddingBottom: '0px'
    }
  }

Then i just applied my custom class to the element and the combination of my custom class and the MUI class i wanted to override was able to override the MUI class' styling.

Media Queries in Material-UI Using Styled-Components

Below is an example showing one way of leveraging the Material-UI theme breakpoints with styled-components. This is passing the Material-UI theme to the styled-components ThemeProvider in order to make it available as a prop within the styles. The example also uses StylesProvider with the injectFirst prop so that the Material-UI styles will occur at the beginning of the <head> rather than the end, so that the styled-components styles occur after the Material-UI styles and therefore win when specificity is otherwise equal.

import React from "react";
import styled, { ThemeProvider as SCThemeProvider } from "styled-components";
import { useTheme, StylesProvider } from "@material-ui/core/styles";
import MuiAppBar from "@material-ui/core/AppBar";

const AppBar = styled(MuiAppBar)`
  background-color: red;
  ${props => props.theme.breakpoints.up("sm")} {
    background-color: orange;
  }
  ${props => props.theme.breakpoints.up("md")} {
    background-color: yellow;
    color: black;
  }
  ${props => props.theme.breakpoints.up("lg")} {
    background-color: green;
    color: white;
  }
`;
export default function App() {
  const muiTheme = useTheme();
  return (
    <StylesProvider injectFirst>
      <SCThemeProvider theme={muiTheme}>
        <AppBar>Sample AppBar</AppBar>
      </SCThemeProvider>
    </StylesProvider>
  );
}

Edit MUI theme breakpoints with styled-components

How can I use CSS @media for responsive with makeStyles on Reactjs Material UI?

Below is an example showing two ways of specifying media queries within makeStyles (further down is a v5 example using styled). You can use up, down, only, and between functions in theme.breakpoints (which generate the media query strings for you based on the breakpoints specified in the theme), or you can use media queries directly.

import React from "react";
import Button from "@material-ui/core/Button";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
  button: {
    color: "white",
    [theme.breakpoints.down("xs")]: {
      marginTop: theme.spacing(1),
      backgroundColor: "purple"
    },
    [theme.breakpoints.between("sm", "md")]: {
      marginTop: theme.spacing(3),
      backgroundColor: "blue"
    },
    "@media (min-width: 1280px)": {
      marginTop: theme.spacing(5),
      backgroundColor: "red"
    }
  }
}));
export default function App() {
  const classes = useStyles();
  return (
    <Button className={classes.button} variant="contained">
      Hello World!
    </Button>
  );
}

Edit media queries