I am working on a web app, using React.js and Material UI. I don't know why image is not displaying on my web, I have tried almost everything I can. Here is the code where I am using the image tag.
import { TextField, Grid, Typography } from '#material-ui/core';
import WFH1 from './images/WFH1.svg'
function IntroSection()
{
return(
<Grid container>
<Grid item xs={3}>
<image src={WFH1}/>
</Grid>
<Grid item xs={6} style={{color:'white', textAlign:'center'}}>
<Typography variant="h3">Get paid for the work</Typography>
<Typography variant="h3"> you <span style={{color:'#3ee8e5'}}>love</span> to do.</Typography>
</Grid>
<Grid item xs={3}></Grid>
</Grid>
);
}
export default IntroSection; ````
And here is the structure of my code:
[1]: https://i.stack.imgur.com/KwRbs.png
You should use the HTML img tag to actually display an image:
https://www.w3schools.com/tags/tag_img.asp
You are trying to use an HTML tag image, that not exists.
Image tag is not exists. You have to use img tag in html.
<img src={WFH1}/>
Related
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.
I started a project with react-splitter-layout and material ui library.
I would like to find a way to create responsive components, with material ui Grid or Box component
I encounter a problem with responsive, I would like my left panel to be responsive (use of xs / md / lg) with Grid component based on the size of the container (not window size), as you can see in the example below , this is not the case. It's use the viewport size. (I know it's normal because of media queries).
Here the code sample : https://codesandbox.io/s/material-demo-i04rr?file=/demo.js (recommended to open the rendering in a new tab to see the problem)
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";
import SplitterLayout from "react-splitter-layout";
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1
},
paper: {
padding: theme.spacing(2),
textAlign: "center",
color: theme.palette.text.secondary
}
}));
export default function CenteredGrid() {
const classes = useStyles();
return (
<SplitterLayout>
<div className={classes.root}>
<Grid container spacing={3}>
<Grid item xs={4} md={6} lg={8}>
<Paper className={classes.paper}>xs=3</Paper>
</Grid>
<Grid item xs={4} md={4} lg={2}>
<Paper className={classes.paper}>xs=3</Paper>
</Grid>
<Grid item xs={4} md={2} lg={2}>
<Paper className={classes.paper}>xs=3</Paper>
</Grid>
</Grid>
</div>
<div>Panel 2</div>
</SplitterLayout>
);
}
Anyone have a solution to this problem ?
Best regards,
EDIT
I also posted in material ui github https://github.com/mui-org/material-ui/issues/25189
This is one of my question when I started using material-UI or any CSS framework.
Material-UI currently supports almost cases you need especially for responsive, and I never use any other library/framework for responsive. First, you know that all xs, sm, md are based on screen size, not on their container.
Then, the problem here is how did you called a "container"? When you work with material-UI, you should layout everything based on screen size instead of a specific container. Because your "container" you are think about doesn't have any meaning in responsive. It just help you solve the layout problem.
To be honest, just change your mind, thinking in the way of Material-UI, and everything about responsive become easily.
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 am using material UI's Grid component and making use of the auto property for the first column
so I have
<Grid container className={classes.borderclass}>
<Grid item xs={"auto"}>
<Items />
</Grid>
<Grid item xs={10}>
<Content />
</Grid>
</Grid>
However this will not fill the entire container but I do not seem to see an option for remainder in the sizes.
I have looked into css calc option however I do not see a way to get the size of the auto column in react to compare against the div
any suggestions even if it is not material ui will be appreciated.
If you check the Material-UI demo, they have a working example that shows the auto property in action. So, as the example depicted here, you don't need to specify the auto keyword. Do just this:
<Grid container className={classes.borderclass}>
<Grid item xs>
<Items />
</Grid>
<Grid item xs={10}>
<Content />
</Grid>
</Grid>
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>