Media queries in Material UI components

by

By using the breakpoints attribute of the theme, you can utilize the same breakpoints used for the Grid and Hidden components directly in your component.

API

theme.breakpoints.up(key) => media query

Arguments

key (String | Number): A breakpoint key (xs, sm, etc.) or a screen width number in pixels.

Returns
media query: A media query string ready to be used with JSS.

Examples

const styles = theme => ({
  root: {
    backgroundColor: 'blue',
    [theme.breakpoints.up('md')]: {
      backgroundColor: 'red',
    },
  },
});

For more information check this out

More Related Contents:

  1. Material UI v4 makeStyles exported from a single file doesn’t retain the styles on refresh
  2. How to add custom MUI palette colors
  3. Global outlined override
  4. Passing props to MUI styles
  5. Change border color on Material-UI TextField
  6. Internal implementation of “makeStyles” in React Material-UI?
  7. How do I custom style the underline of Material-UI without using theme?
  8. Setting text color, outline, and padding on Material-ui Autocomplete component
  9. How do I avoid ‘Function components cannot be given refs’ when using react-router-dom?
  10. Is it possible to override material-ui components default props?
  11. How to use MUI v5 makeStyles without ThemeProvider?
  12. Media queries in MUI components
  13. How do you change a style of a child when hovering over a parent using MUI styles?
  14. Difference between @mui/material/styles and @mui/styles?
  15. × TypeError: Cannot read properties of undefined (reading ‘map’)
  16. React testing library on change for Material UI Select component
  17. Property ‘value’ does not exist on type ‘never’. when use useRef hook in mui
  18. How to add custom Material UI palette colors
  19. Passing props to Material UI styles
  20. Material-Ui TextField not affected with the RTL direction
  21. How do you change a style of a child when hovering over a parent using Material UI styles?
  22. Error : Cannot read property ‘map’ of undefined
  23. How do I hide API key in create-react-app?
  24. React app exiting in docker container with exit code 0
  25. Testing React components that fetches data using Hooks
  26. Trace why a React component is re-rendering
  27. How can I use Fabric.js with React?
  28. Change language to JSX in Visual Studio Code
  29. Updating state on props change in React Form
  30. Importing images breaks jest test

Leave a Comment