I am new to React and I am watching a tutorial on youtube. The guy is using some styling from #material-ui/core and his project looks like this https://www.youtube.com/watch?v=ngc9gnGgUdA&t=2209s at min 36:50 while mine looks as the following picture.
This is the code
import {Container, AppBar, Typography, Grow, Grid} from '#material-ui/core'
<Container maxWidth='lg'>
<AppBar positin="static" color='inherit'>
<Typography variant='h2' align='center'>Memories</Typography>
<img src={memories} alt='memories' height={60}/>
</AppBar>
<Grow in>
<Container>
<Grid container justifyContent='space-between' alignItems='stretch' spacing={3}>
<Grid item xs={12} sm={7}>
<Posts />
</Grid>
<Grid item xs={12} sm={4}>
<Form/>
</Grid>
</Grid>
</Container>
</Grow>
</Container>
And another thing is that the <AppBar> and <Grow> components start from the top of the page and overlap with each other. If I remove the <AppBar> the page looks like this.
As you can see there is POSTS, POST and FORM hiding behind the other <AppBar>.
I am using the exact same code and don't understand why there are so many differences. The styling part might be fixable if I play with it, but I don't understand why the overlapping happens and how to fix it.
Related
I am looking at react-admin demo code trying to learn from it. I have noticed quite a few time the same behavior: demo code is not waiting for a record to load and does not get undefined exceptions. I am struggling to understand why are they not getting the undefined exception. For example: In PosterEdit source code they are just using the component which looks like
const Poster = ({ record }) => {
const classes = useStyles();
return (
<Card className={classes.root}>
<CardContent className={classes.content}>
<img src={record.image} alt="" className={classes.img} />
</CardContent>
</Card>
);
};
If I use the component in the same way, I get undefined exception
TypeError: can't access property "image", record is undefined
I do not understand the magic from the demo code. Can someone demystify?
I found the answer for this exact example.
My Poster component was placed within several Grid components from material-u. Here is the cleaned code sample to show the structure.
<Edit {...props} aside={<Aside />}>
<TabbedForm }>
<FormTab >
<Grid container fullWidth className={classes.tabContent}>
<Grid item xs={7}>
<Grid container>
<Grid item xs={12}>
<Typography variant="h6" gutterBottom className={classes.sectionTitle}/>
<Poster
</Grid>
</Grid>
</Grid>
</Grid>
</FormTab >
..other form tabs..
</TabbedForm }>
</Edit>
If the component is placed directly as FormTab child, then it works. I still do not understand why though. Anyway, I hope it helps someone.
Im completely new to Material UI and im trying to make use of Grid concept to position my components in much dynamic way. I would like to create the grids in the following pattern and i'm stuck in finding out a solution to create two column grid having different number of rows or items.
Below is the sample layout which im trying to design using grids so, can somebody please share any ideas to achieve it?
Sample code would be more helpful.
Screenshot of my planned design
To get the Grid format in material UI, follow this docs. You can try like this, with multiple nested grid containers to achieve what you expect.
<div>
<Grid
container
spacing={1}
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<Grid container item xs={4} spacing={1}>
<Grid item xs={12}>
<Paper>Some Text </Paper>
</Grid>
<Grid item xs={12}>
<Paper style={{height:400}}>Component A</Paper>
</Grid>
</Grid>
<Grid container item xs={8} spacing={1} >
<Grid item xs={12}>
<Paper style={{height:200}}>Component B</Paper>
</Grid>
<Grid item xs={12}>
<Paper style={{height:200}}>Component C</Paper>
</Grid>
</Grid>
</Grid>
</div>
I can't seem to figure this out. I'm trying to use the Grid component with Material-UI, but whenever I try there is no spacing between the elements. I tried with my own code, and then some code from a tutorial website and neither produced the desired spacing between elements.
Here is code I used:
<Grid container spacing={40} justify="center">
<Grid>
<Card>
<Typography component='h4' variant='h4'>Manager Login</Typography>
<Button>Login</Button>
</Card>
</Grid>
<Grid>
<Card>
<Typography component='h4' variant='h4'>User Login</Typography>
<Button>Login</Button>
</Card>
</Grid>
</Grid>
And this is what it produces
And because I know my code isn't the best, I also tried this tutorial from reactgo and I got the same problem.
Full code: https://pastebin.com/n6gnQN6B
Code Sandbox: https://codesandbox.io/embed/interesting-mahavira-912zf
I have a simple Grid from the material-UI library. It looks like that:
<Grid container>
<Grid item sm={6}>
<SearchPanel/>
</Grid>
<Grid item sm={6}>
<ItemStatusFilter/>
</Grid>
</Grid>
I just can't understand how can I align the first grid item in the center, and the second, for example, on the right side?
UPD: I could do it with justify-content: flex-end!important in my CSS files, but I'm not sure that it's the best way.
Below is one way of doing this for v3 and v4 of Material-UI (v5 example further down).
import React from "react";
import ReactDOM from "react-dom";
import Grid from "#material-ui/core/Grid";
function App() {
return (
<Grid container>
<Grid item xs={4}>
{/* Intentionally Empty */}
</Grid>
<Grid container item xs={4} justify="center">
<div>Search Panel</div>
</Grid>
<Grid container item xs={4} justify="flex-end">
<div>Item Status Filter</div>
</Grid>
</Grid>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
This is the general idea of Duncan's comment. I have changed sm to xs just so I could verify the behavior on any size screen. In the end, Material-UI's Grid just adds some convenience around the CSS Flexbox model, so to know how to do it with Grid you need to understand how you would do it in CSS. The main thing Grid adds is the easy responsive aspects of controlling the 12-column grid differently for different screen sizes.
Here's an equivalent example for v5 (justify prop renamed to justifyContent):
import React from "react";
import ReactDOM from "react-dom";
import Grid from "#mui/material/Grid";
function App() {
return (
<Grid container>
<Grid item xs={4}>
{/* Intentionally Empty */}
</Grid>
<Grid container item xs={4} justifyContent="center">
<div>Search Panel</div>
</Grid>
<Grid container item xs={4} justifyContent="flex-end">
<div>Item Status Filter</div>
</Grid>
</Grid>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
I tried everything but it seems that I'm missing something. I have been trying a lot of time to make a button center inside the grid when the screen is extra small.
This code works perfectly, but the problem is that i want my button to only center when the screen is extra small not on all sizes.
Working Code.
Grid item xs={12}>
<Grid container justify="center">
<Button color="primary" variant="raised">
Add Product
</Button>
</Grid>
</Grid>
Not working code...
Grid item xs={12}>
<Grid container className={"justify-xs-center"}>
<Button color="primary" variant="raised">
Add Product
</Button>
</Grid>
</Grid>
I have been reading the API documentation for the Grid, as i understand this is the correct way to add a predefined class in the component, but the effect seems not to work. When i inspect the element though the class justify-xs-center is found on the Grid container component as expected.
Any help is appreciated, Thank you.
Well it seems i have really misunderstood the CSS API of the Grid.
https://material-ui.com/api/grid/#css-api
My solution to this was to use the breakpoints offered by material-ui.
https://material-ui.com/layout/breakpoints/#theme-breakpoints-up-key-media-query
I created this CSS rule and applied it to the Grid container element that i wanted its contents to be centered.
const styles = theme => ({
addButtonContainer: {
[theme.breakpoints.down("xs")]: {
justifyContent: "center"
}
}
});
And this is the container that is being centered on extra small screens
<Grid item xs={12}>
<Grid container className={classes.addButtonContainer}>
<Button color="primary" variant="raised">
Add Product
</Button>
</Grid>
</Grid>