CODEWITHSUNDEEP
reactjsmaterial-ui
Márcio
Márcio

Reputation: 181

How can I use BOX component from Material UI to different screen sizes?

I'd like to apply different sizes and types of component from Material UI to different types of screens, how can I do that?

Upvotes: 0

Views: 168

Answers (1)

Jaxoo Jack
Jaxoo Jack

Reputation: 70

can be used props in styles. new file BreakPoints.js

export default {
    up(size) {
    const sizes = {
      xl: "1400px",
      lg: "1199.98px",
      md: "991.98px",
      sm: "767.98px",
      xs: "575.98px",
    };
    return `@media (min-width: ${sizes[size]})`;
  },
  down(size) {
    const sizes = {
      xs: "575.98px",
      sm: "767.98px",
      md: "991.98px",
      lg: "1199.98px",
      xl: "1400px",
    };
    return `@media (max-width: ${sizes[size]})`;
  },
};

Component file:(just an example with a React)

import React from "react";
import { withStyles } from "@material-ui/core/styles";
import styles from "./your styles file location";


...component...
export default withStyles(styles)(< component name>);

style file.js

import sizes from "../../../styles/BreakPoints";

export default {
root: {
display:"block"

[sizes.up("sm")]: {
display: "none",
 },
}

Upvotes: 2

Related Questions