How to use Grid into another file in React material-ui

Asked
Active3 hr before
Viewed126 times

7 Answers

materialreact
90%

I use React js.I want to use Grid, but I can't in this particular case. I have a component called CardComponent.js The problem is that I use the map function. I don't know how to use Grid., What are the main open problems in the theory of amenability of groups? , Note that the <ElevatedCardHeader> component should be wrapped with <Grid container>. – Dekel May 16 '20 at 23:17

Pretag
 Pretag team - issue, fix, solve, resolve
88%

Using your favorite package manager, install @material-ui/x-grid for the full-featured enterprise grid, or @material-ui/data-grid for the free community version.,Get started with the last React data grid you will need. Install the package, configure the columns, provide rows and you are set.,DataGrid MIT licensed as part of the community edition. It's an extension of @material-ui/core.

Using your favorite package manager, install @material-ui/x-grid for the full-featured enterprise grid, or @material-ui/data-grid for the free community version.

// with npm
npm install @material - ui / data - grid

// with yarn
yarn add @material - ui / data - grid

The grid has two peer dependencies on Material-UI components. If you are not already using Material-UI in your project, you can install it with:

// with npm
npm install @material - ui / core @material - ui / styles

// with yarn
yarn add @material - ui / core @material - ui / styles

First, you have to import the component as below. To avoid name conflicts the component is named XGrid for the full-featured enterprise grid, and DataGrid for the free community version.

import {
   DataGrid
} from '@material-ui/data-grid';

Here is an example

const rows: GridRowsProp = [{
      id: 1,
      col1: 'Hello',
      col2: 'World'
   },
   {
      id: 2,
      col1: 'XGrid',
      col2: 'is Awesome'
   },
   {
      id: 3,
      col1: 'Material-UI',
      col2: 'is Amazing'
   },
];

Comparable to rows, columns are objects defined with a set of attributes of the GridColDef interface. They are mapped to rows through their field property.

const columns: GridColDef[] = [{
      field: 'col1',
      headerName: 'Column 1',
      width: 150
   },
   {
      field: 'col2',
      headerName: 'Column 2',
      width: 150
   },
];

Putting it together, this all you need to get started, as you can see in this live and interactive demo:

import React from 'react';
import { DataGrid, GridRowsProp, GridColDef } from '@material-ui/data-grid';

const rows: GridRowsProp = [
  { id: 1, col1: 'Hello', col2: 'World' },
  { id: 2, col1: 'XGrid', col2: 'is Awesome' },
  { id: 3, col1: 'Material-UI', col2: 'is Amazing' },
];

const columns: GridColDef[] = [
  { field: 'col1', headerName: 'Column 1', width: 150 },
  { field: 'col2', headerName: 'Column 2', width: 150 },
];

export default function App() {
  return (
    <div style={{ height: 300, width: '100%' }}>
      <DataGrid rows={rows} columns={columns} />
    </div>
  );
}
load more v
72%

So while it's not required to use Material UI's Grid to build grids in your application, using it does have some advantages (and disadvantanges).,So how do we implement responsive design with Material UI's Grid? As you can see in our Example 4 component in the above Sandbox:,So to keep the definition really simple, a flex container is an element with CSS display: flex. That's it, by that one CSS property, that element becomes a flex container and the children of that element magically become flex items. Check out Example 1 below for a simple example of a pure flexbox with no other CSS properties other than a border on the items so you can see how they are laid out by default.

Looking at Material UI's default breakpoints, we can see these are the horizontal screen sizes we will use as props to the Grid component. These are also used elsewhere in Material UI.

xs, extra - small: 0 pxsm, small: 600 pxmd, medium: 960 pxlg, large: 1280 pxxl, extra - large: 1920 px
xs, extra - small: 0 pxsm, small: 600 pxmd, medium: 960 pxlg, large: 1280 pxxl, extra - large: 1920 px

So how do we implement responsive design with Material UI's Grid? As you can see in our Example 4 component in the above Sandbox:

import React from "react";import { makeStyles } from "@material-ui/core/styles";import Paper from "@material-ui/core/Paper";import Grid from "@material-ui/core/Grid";const useStyles = makeStyles((theme) => ({  paper: {    padding: theme.spacing(1),    textAlign: "center",    color: theme.palette.text.secondary  }}));function GridItem({ classes }) {  return (    // From 0 to 600px wide (smart-phones), I take up 12 columns, or the whole device width!    // From 600-690px wide (tablets), I take up 6 out of 12 columns, so 2 columns fit the screen.    // From 960px wide and above, I take up 25% of the device (3/12), so 4 columns fit the screen.    <Grid item xs={12} sm={6} md={3}>      <Paper className={classes.paper}>item</Paper>    </Grid>  );}export default function AutoGrid() {  const classes = useStyles();  return (    <div>      <h3> Ex 4: Responsive Material UI Grid </h3>      // I am a container Grid with 1 (8px) spacing      <Grid container spacing={1}>        <GridItem classes={classes} />        <GridItem classes={classes} />        <GridItem classes={classes} />        <GridItem classes={classes} />      </Grid>    </div>  );}
import React from "react";import { makeStyles } from "@material-ui/core/styles";import Paper from "@material-ui/core/Paper";import Grid from "@material-ui/core/Grid";const useStyles = makeStyles((theme) => ({  paper: {    padding: theme.spacing(1),    textAlign: "center",    color: theme.palette.text.secondary  }}));function GridItem({ classes }) {  return (    // From 0 to 600px wide (smart-phones), I take up 12 columns, or the whole device width!    // From 600-690px wide (tablets), I take up 6 out of 12 columns, so 2 columns fit the screen.    // From 960px wide and above, I take up 25% of the device (3/12), so 4 columns fit the screen.    <Grid item xs={12} sm={6} md={3}>      <Paper className={classes.paper}>item</Paper>    </Grid>  );}export default function AutoGrid() {  const classes = useStyles();  return (    <div>      <h3> Ex 4: Responsive Material UI Grid </h3>      // I am a container Grid with 1 (8px) spacing      <Grid container spacing={1}>        <GridItem classes={classes} />        <GridItem classes={classes} />        <GridItem classes={classes} />        <GridItem classes={classes} />      </Grid>    </div>  );}
load more v
65%

First, import the Grid component in your App.jsfile.,This column of cards doesn't look right. To fix this, you will use the Grid component to change the app's layout.,Next, wrap each individual card inside the Grid component with the item layout.

1n px create - react - app react - material - ui - example
2 cd react - material - ui - example
load more v
75%

In this tutorial you’ll learn how to setup and use Material-UI in your React web application. We’ll start from scratch and build a real-world sample application from the ground up.,In this tutorial you’ll learn how to use the Material-UI library in your React application. By following the steps you’ll learn how to build the following sample application from start to finish:,Again we need to import and add CourseList component in App.js:

Pretag
 Pretag team - issue, fix, solve, resolve
40%

We will see how to style Material UI components with the library styled-components. Among the edge cases we will cover are: overriding Material UI's theme, prioritize the CSS rules of styled components and override classes other than root of Material UI components.,Material UI was designed to be used from the get-go with its own styling solution, implemented over JSS, as opposed to using styled-components.,I believe I have shown you all the possible edge-cases that can happen when using the Material UI with styled components. While I chose Material UI as my component collection, you should be able to use the same styling techniques for any other component library.

Pretag
 Pretag team - issue, fix, solve, resolve
22%

To import the <Grid /> component into the js file, use the following line.,There are two types of grid components: containers and items. To make the layout fluid and adaptive to screen sizes, the item widths are set in percentages. Padding creates spacing between individual items. Finally, there are five types of grid breakpoints: xs, sm, md, lg, and xl.,Margins — The spaces between the left and right sides of the screen are defined by a fixed value similar to gutters, at each breakpoint

Pretag
 Pretag team - issue, fix, solve, resolve

Other "material-react" queries related to "How to use Grid into another file in React material-ui"