I just upgraded to MUI Version 5.4 and now my Inline Typography does not align right anymore.
This is my Code that worked for MUI Version 4:
<Grid container xs={12}>
<Grid container xs={12} justify="space-between" style={{borderBottom: "3px solid black"}}>
<Typography inline>Value</Typography>
<Typography inline align="right">{prodVol}MWh</Typography>
</Grid>
</Grid>
My Guess is, that there is a Problem with the new Grid, because when I changed that Import the Code stopped working.
As Explained in this answer, I just replaced "justify" with "justifyContent".
My Working Code for MUI V5:
<Grid container xs={12}>
<Grid container xs={12} justifyContent="space-between" style={{borderBottom: "3px solid black"}}>
<Typography inline>Value</Typography>
<Typography inline align="right">{prodVol}MWh</Typography>
</Grid>
</Grid>
Thanks Medi :)
Related
I am using Material UI in a react app. I am using the Material UI component cards and I am getting some undesired results. I am getting white space on the right edge of the page. I am hoping to create gaps between "neighboring" cards. In order to do this, I have implemented the following code:
<div>
<Grid container spacing={10} justify="center">
<Grid item xs={12}>
<Card>
<CardContent>
...
</CardContent>
</Card>
</Grid>
<Grid item xs={12} lg={6}>
<Card>
<CardContent>
...
</CardContent>
</Card>
</Grid>
<Grid item xs={12} lg={6}>
<Card>
<CardContent>
...
</CardContent>
</Card>
</Grid>
</Grid>
</div>
This gets the desired spacing around and between the cards. However it also adds white space to the right side of the page. So that the page is now horizontally scrollable. When I remove the spacing={10} argument this space is no longer there. Is there a way to get the best of both worlds and the spacing between the cards without pushing padding over the edge of the screen?
Would love to hear any ideas! Thanks!
This behavior is a known limitation with Material-UI.
You have two options:
Eliminate the spacing entirely and use your own CSS
Apply padding to the parent div. Ex:
<div style={{ padding: 30 }} >
<Grid container spacing={10} justify="center">
.....
</Grid>
</div>
Demo
You can read more about this on Material-UI's documentation: https://material-ui.com/components/grid/#negative-margin
I want to use MUI Grid and I wanted to hide one item Grid if the screen is small, so I found something called Display. My code looks like this:
function CRUDView() {
return (
<Grid
container
spacing={1}
direction="row"
justify="center"
alignItems="center"
>
<Grid item xs={12} lg={6}>
<span>XX</span>
</Grid>
<Grid item xs={6} display={{ xs: "none", lg: "block" }} >
<span>YY</span>
</Grid>
</Grid>
);
}
I don´t uderstand why it doesn't work (the text YY still appears) . Can't I use display with Grid maybe? If yes then why?
The style functions are not automatically supported by the Grid component.
The easiest way to leverage the style functions is to use the Box component. The Box component makes all of the style functions (such as display) available. The Box component has a component prop (which defaults to div) to support using Box to add style functions to another component.
The Grid component similarly has a component prop, so you can either have a Grid that delegates its rendering to a Box or a Box that delegates to a Grid.
The example below (based on your code) shows both ways of using Box and Grid together.
import React from "react";
import ReactDOM from "react-dom";
import Grid from "#material-ui/core/Grid";
import Box from "#material-ui/core/Box";
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles({
gridItem: {
border: "1px solid red"
}
});
function App() {
const classes = useStyles();
return (
<Grid
container
spacing={1}
direction="row"
justify="center"
alignItems="center"
>
<Grid className={classes.gridItem} item xs={12} lg={6}>
<span>XX</span>
</Grid>
<Box
component={Grid}
className={classes.gridItem}
item
xs={3}
display={{ xs: "none", lg: "block" }}
>
<span>YY</span>
</Box>
<Grid
component={Box}
className={classes.gridItem}
item
xs={3}
display={{ xs: "none", lg: "block" }}
>
<span>ZZ</span>
</Grid>
</Grid>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
For MUI v5:
In MUI v5 the <Hidden> tag got deprecated in favor for sx.display property withing <Grid> and <Box> tags - display documentation.
For MUI v4 and earlier:
MUI exposes a <Hidden> component to achieve this. Just wrap component you want to hide for specific screen size:
<Hidden xsDown >
<p>Hide me on XS view port width.</p>
</Hidden>
You can find more examples in the hidden documentation.
In MUI v5, you can change the display value directly on Grid without having to use Box anymore:
<Grid
item
xs={3}
sx={{
display: { xs: "none", lg: "block" }
}}
>
<span>YY</span>
</Grid>
Grid Items just setup your layout.
They don't actually display anything. The MUI display option is for hiding specific elements.
Try this:
function CRUDView() {
return (
<Grid
container
spacing={1}
direction="row"
justify="center"
alignItems="center"
>
<Grid item xs={12} lg={6}>
<span>XX</span>
</Grid>
//removed from the below Grid Item
<Grid item xs={12} lg={6}>
<span display={{ xs: "none", lg: "block" }}>YY</span>
</Grid>
</Grid>
);
}
That will hide the individual span element even though the grid is still there.
I don't quite understand the React Material-UI grid system. If I want to use a form component for login, what is the easiest way to center it on the screen on all devices (mobile and desktop)?
Since you are going to use this on a login page.
Here is a code I used in a Login page using Material-UI
MUI v5
<Grid
container
spacing={0}
direction="column"
alignItems="center"
justifyContent="center"
style={{ minHeight: '100vh' }}
>
<Grid item xs={3}>
<LoginForm />
</Grid>
</Grid>
MUI v4 and below
<Grid
container
spacing={0}
direction="column"
alignItems="center"
justify="center"
style={{ minHeight: '100vh' }}
>
<Grid item xs={3}>
<LoginForm />
</Grid>
</Grid>
this will make this login form at the center of the screen.
But still, IE doesn't support the Material-UI Grid and you will see some misplaced content in IE.
As pointed by #max, another option is,
<Grid container justifyContent="center">
<Your centered component/>
</Grid>
Please note that versions MUIv4 and below should use justify="center" instead.
However, using a Grid container without a Grid item is an undocumented behavior.
Update on 2022-06-06
In addition to that, another new and better approach will be using the Box component.
<Box
display="flex"
justifyContent="center"
alignItems="center"
minHeight="100vh"
>
<YourComponent/>
</Box>
This was originally posted by Killian Huyghe as another answer.
Hope this will help you.
You can do this with the Box component:
import Box from "#material-ui/core/Box";
...
<Box
display="flex"
justifyContent="center"
alignItems="center"
minHeight="100vh"
>
<YourComponent/>
</Box>
Another option is:
<Grid container justify = "center">
<Your centered component/>
</Grid>
Here is another option without a grid:
<div
style={{
position: 'absolute',
left: '50%',
top: '50%',
transform: 'translate(-50%, -50%)'
}}
>
<YourComponent/>
</div>
The #Nadun's version did not work for me, sizing wasn't working well. Removed the direction="column" or changing it to row, helps with building vertical login forms with responsive sizing.
<Grid
container
spacing={0}
alignItems="center"
justify="center"
style={{ minHeight: "100vh" }}
>
<Grid item xs={6}></Grid>
</Grid>;
If you just need to center a couple of items in a row or column in MUI v5, you can use Stack instead of Grid:
<Stack alignItems="center">
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Stack>
Another example with row direction:
<Stack direction="row" justifyContent="center">
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Stack>
Live Demo
With other answers used, xs='auto' did a trick for me.
<Grid container
alignItems='center'
justify='center'
style={{ minHeight: "100vh" }}>
<Grid item xs='auto'>
<GoogleLogin
clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID}
buttonText="Log in with Google"
onSuccess={this.handleLogin}
onFailure={this.handleLogin}
cookiePolicy={'single_host_origin'}
/>
</Grid>
</Grid>
All you have to do is wrap your content inside a Grid Container tag, specify the spacing, then wrap the actual content inside a Grid Item tag.
<Grid container spacing={24}>
<Grid item xs={8}>
<leftHeaderContent/>
</Grid>
<Grid item xs={3}>
<rightHeaderContent/>
</Grid>
</Grid>
Also, I've struggled with material grid a lot, I suggest you checkout flexbox which is built into CSS automatically and you don't need any addition packages to use. Its very easy to learn.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Little update 07-09-2021 'justify' is now 'justifyContent="center"'
https://material-ui.com/components/grid/
The most versatile solution for me is using container and item props in combination.
The container and item props are two independent booleans; they can be combined to allow a Grid component to be both a flex container and child.
Grid MUI documentation - https://mui.com/material-ui/react-grid/#responsive-values
<Grid container alignContent={'center'} xs={12}>
<Grid container item xs={6} justifyContent={'start'}>
<span> content one </span>
</Grid>
<Grid container item xs={6} justifyContent={'center'}>
<span> content two </span>
</Grid>
</Grid>
You can make this component and use it everywhere you want. also you can add your props:
import Box from '#mui/material/Box';
export default function Center(props: any) {
const { children } = props
return (
<Box
sx={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column'
}}
{...props}
>
{children}
</Box>
);
}
just do style={{display:'flex';justifyContent:'center';alignItems:'center'}}
I'm using Material-UI version 1. installed by this command:
npm install -S material-ui#next
Everytime I want to use , an unwanted horizontal scroll appears in the page.
Code:
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles, createStyleSheet } from 'material-ui/styles';
import Paper from 'material-ui/Paper';
import Grid from 'material-ui/Grid';
/* project imports */
import NavMenu from './Page-Parts/NavMenu';
import LoginPanel from './Login-Parts/LoginPanel';
const styleSheet = createStyleSheet('FullWidthGrid', theme => ({
root: {
flexGrow: 1,
marginTop: 0,
},
paper: {
padding: 16,
textAlign: 'center',
color: theme.palette.text.secondary,
marginTop: "3rem"
},
}));
function Login(props) {
const classes = props.classes;
return (
<div className={classes.root}>
<Grid container gutter={24} justify='center'>
<Grid item xs={12} md={12} sm={12} lg={12}>
<NavMenu/>
</Grid>
<Grid item xs={6} sm={6} md={6} lg={6}>
<Paper className={classes.paper}>
<LoginPanel />
</Paper>
</Grid>
</Grid>
</div>
);
}
Login.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styleSheet)(Login);
Bootstrap and other grid layout options are in conflict with this library. When I use <Grid> in other parts of a component(for example in drawer), horizontal scroll appears makes the UI ugly
NavMenu and LoginPanel are some self-made components and they work and using them without doesn't cause horizontal scroll.
I had the same issue. I figured out a couple solutions but neither feel very elegant:
Disable spacing
Unfortunately this removes all padding from child grid items within the container:
<Grid container
spacing={0}>
Manually fix the CSS
This is what I ended up doing:
<Grid container
style={{
margin: 0,
width: '100%',
}}>
Copied the easy solution from comment:
added xs={12} to <Grid container>
<Grid container spacing={3} xs={12}>
credit to https://github.com/mui-org/material-ui/issues/7466#issuecomment-509150645
This is caused by spacing. Sometimes we can still use spacing by limiting the Grid under a Container.
<Container maxWidth={false}>
<Grid container spacing={6}>
Omit
</Grid>
</Container>
The best solution here is to wrap the grid in a container with the max width
<Container>
<Grid container spacing={2}>
<Grid item sm={6}></Grid>
<Grid item sm={6}></Grid>
<Grid item sm={6}></Grid>
<Grid item sm={6}></Grid>
</Grid>
</Container>
This way the overflow is taken care by the container and the grid always expands responsively into the parent. This by far is the most elegant solution I have found.
Tip: If your are using this library to create something like a dashboard then always have the parent for content area as <Container>, This way the overflow problem never occurs. Give it a shot. Worked well for me after struggling for some time and only finding non elegant solution everywhere. I must say this should be documented well in the react Material UI pages.
This worked for me!
<Box style={{overflow: 'auto'}}>
<Grid>...</Grid>
</Box>
The root issue is now fixed in the latest version of Material-UI (v5.0.0-alpha.30). See https://github.com/mui-org/material-ui/issues/7466#issuecomment-820736245.
I was facing the same issue. Remove spacing from the Grid container didn't solve it.
Solution:
Instead of setting with on the parent of the Grid container, setting maxWidth fixes the issues and assigns the desired width. For example, if we set maxWidth on the Box that is the parent of Grid container, then the Grid doesn't overflows horizontally.
We don't need to set width 100% on the Grid container because its purpose is to adapt to 100% width by default.
<Box style={{ maxWidth: 600}}>
<Grid container spacing={3}>
...
</Grid>
</Box>
well the idea i came up is
<Grid container>
<Grid item xs={12} md={4}>
<div style={{width:"97%",margin:"0 auto"}}>
.....Your content
</div>
</Grid>
<Grid item xs={12} md={4}>
<div style={{width:"97%",margin:"0 auto"}}>
.....Your content
</div>
</Grid>
<Grid item xs={12} md={4}>
<div style={{width:"97%",margin:"0 auto"}}>
.....Your content
</div>
</Grid>
</Grid>
This is a known limitation of the grid with negative margins. https://material-ui.com/components/grid/#limitations.
Don't use Grid spacing and manually configure your spacing.
Add padding equal to at least half of the spacing to the parent, For Example:
12 = 3 (spacing) * 8 (theme spacing pixels) / 2
<Box p={12}> {/* or style={{ padding: 12 }} */}
<Grid ... spacing={3}>
..additional configuration
</Grid>
</Box>
The downside to this solution is that it changes the look of the component.
set overflow-x: hidden
<Box style={{overflowX: "hidden"}}>
<Grid ... spacing={3}>
..additional configuration
</Grid>
</Box>
The downside to this solution is that it (in my testing) causes issues with touchscreens trying to scroll vertically...
For some reason none of the answers worked for me, I fixed it in Container like this:
<Container component="div" sx={{ maxWidth: "100vw" }}>
<Grid container spacing={3}>
...
</Grid>
</Container>
I'm playing a little bit with Material-UI. Are there any options for creating a grid layout (like in Bootstrap)?
If not, what is the way to add this functionality?
There is a GridList component but I guess it has some different purpose.
Material UI have implemented their own Flexbox layout via the Grid component.
It appears they initially wanted to keep themselves as purely a 'components' library. But one of the core developers decided it was too important not to have their own. It has now been merged into the core code and was released with v1.0.0.
You can install it via:
npm install #material-ui/core
It is now in the official documentation with code examples.
From the description of material design specs:
Grid Lists are an alternative to standard list views. Grid lists are
distinct from grids used for layouts and other visual presentations.
If you are looking for a much lightweight Grid component library, I'm using React-Flexbox-Grid, the implementation of flexboxgrid.css in React.
On top of that, React-Flexbox-Grid played nicely with both material-ui, and react-toolbox (the alternative material design implementation).
I looked around for an answer to this and the best way I found was to use Flex and inline styling on different components.
For example, to make two paper components divide my full screen in 2 vertical components (in ration of 1:4), the following code works fine.
const styles = {
div:{
display: 'flex',
flexDirection: 'row wrap',
padding: 20,
width: '100%'
},
paperLeft:{
flex: 1,
height: '100%',
margin: 10,
textAlign: 'center',
padding: 10
},
paperRight:{
height: 600,
flex: 4,
margin: 10,
textAlign: 'center',
}
};
class ExampleComponent extends React.Component {
render() {
return (
<div>
<div style={styles.div}>
<Paper zDepth={3} style={styles.paperLeft}>
<h4>First Vertical component</h4>
</Paper>
<Paper zDepth={3} style={styles.paperRight}>
<h4>Second Vertical component</h4>
</Paper>
</div>
</div>
)
}
}
Now, with some more calculations, you can easily divide your components on a page.
Further Reading on flex
I hope this is not too late to give a response.
I was also looking for a simple, robust, flexible and highly customizable bootstrap like react grid system to use in my projects.
The best I know of is react-pure-grid https://www.npmjs.com/package/react-pure-grid
react-pure-grid gives you the power to customize every aspect of your grid system, while at the same time it has built in defaults which probably suits any project
Usage
npm install react-pure-grid --save
-
import {Container, Row, Col} from 'react-pure-grid';
const App = () => (
<Container>
<Row>
<Col xs={6} md={4} lg={3}>Hello, world!</Col>
</Row>
<Row>
<Col xsOffset={5} xs={7}>Welcome!</Col>
</Row>
</Container>
);
The way I do is go to http://getbootstrap.com/customize/ and only check "grid system" to download. There are bootstrap-theme.css and bootstrap.css in downloaded files, and I only need the latter.
In this way, I can use the grid system of Bootstrap, with everything else from Material UI.
Below is made by purely MUI Grid system,
With the code below,
// MuiGrid.js
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 => ({
root: {
flexGrow: 1
},
paper: {
padding: theme.spacing(2),
textAlign: "center",
color: theme.palette.text.secondary,
backgroundColor: "#b5b5b5",
margin: "10px"
}
}));
export default function FullWidthGrid() {
const classes = useStyles();
return (
<div className={classes.root}>
<Grid container spacing={0}>
<Grid item xs={12}>
<Paper className={classes.paper}>xs=12</Paper>
</Grid>
<Grid item xs={12} sm={6}>
<Paper className={classes.paper}>xs=12 sm=6</Paper>
</Grid>
<Grid item xs={12} sm={6}>
<Paper className={classes.paper}>xs=12 sm=6</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper className={classes.paper}>xs=6 sm=3</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper className={classes.paper}>xs=6 sm=3</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper className={classes.paper}>xs=6 sm=3</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper className={classes.paper}>xs=6 sm=3</Paper>
</Grid>
</Grid>
</div>
);
}
↓ CodeSandbox ↓
Here is example of grid system with material-ui which is similar to bootstrap:
<Grid container>
<Grid item xs={12} sm={4} md={4} lg={4}>
</Grid>
<Grid item xs={12} sm={4} md={4} lg={4}>
</Grid>
</Grid>