I am adding a card view in my webpage. But the contents in the card gets loaded in the normal view instead of card view.
Here's the Sample code i tried:
import React, { Component } from "react";
import MuiThemeProvider from "#material-ui/core/styles/MuiThemeProvider";
import AppBar from "#material-ui/core/AppBar";
import Toolbar from "#material-ui/core/Toolbar";
import Typography from "#material-ui/core/Typography";
import Button from "#material-ui/core/Button";
import IconButton from "#material-ui/core/IconButton";
import MenuIcon from "#material-ui/icons/Menu";
import Card from "#material-ui/core/Card";
import CardActions from "#material-ui/core/CardActions";
import CardContent from "#material-ui/core/CardContent";
import CardMedia from "#material-ui/core/CardMedia";
import { makeStyles } from "#material-ui/core/styles";
import CardActionArea from "#material-ui/core/CardActionArea";
class HomePage extends Component {
render() {
return (
<div>
<div className={{ flexGrow: 1 }}>
<AppBar style={{ background: "#0080ff" }} position="static">
<Toolbar>
<Typography
color="inherit"
variant="h4"
className={{ flexGrow: 1 }}
>
My Page
</Typography>
<Button color="inherit">Home</Button>
</Toolbar>
</AppBar>
</div>
<div>
<Card className={{ maxWidth: 345 }}>
<CardActionArea>
<CardMedia
className={{ height: 140 }}
image="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg"
title="My App"
/>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
Welcome to My APP
</Typography>
</CardContent>
</CardActionArea>
<CardActions>
<Button size="small" color="primary">
Go to Login Page
</Button>
</CardActions>
</Card>
</div>
</div>
);
}
}
export default HomePage;
The contents get loaded but without the card view. I checked material ui website card in material ui website But I don't know where I am doing wrong. Help me with some solutions
This is the output page i got without card view:
try adding in card media the following prop.
component="img"
Add styles individually like making a styles objects.Not adding styles in classname.
What data is not loading in the card view? Please can you be elaborate!
I faced the same problem. It is resolved by wrapping the HomePage component within a Container
<Container>
<HomePage />
</Container>
Related
I am trying to load a picture using Material UI card component. Everything seems to load except for the actual picture. I have tried all possible ways and other suggestions from the net but no luck.
Here is my code.
I've tried the imageURL, path i even copied the path exactly from the folder structure to see if i wrote it wrong.
import Card from '#mui/material/Card';
import CardMedia from '#mui/material/CardMedia';
import { Button, CardActionArea, CardActions } from '#mui/material';
function DisplayProjectCard(props) {
return (
<Card elevation={0}
sx={{ maxWidth: 645,
backgroundColor: "transparent", p:4 }}>
<CardActionArea>
<CardMedia
component="img"
title="My Next Promo App landing page"
height="240"
width="440"
image="src/static/images/MyNextPromoApp.png"
alt="Home page of My Next Promo App"
/>
</CardActionArea>
<CardActions sx={{
justifyContent:'center'
}}>
<Button size="small" color="primary">
View
</Button> |
<Button size="small" color="primary">
Github
</Button>
</CardActions>
</Card>
);
}
export default DisplayProjectCard```
I tried material ui and i cant figure out how to alight buttons to the right ((
import * as React from "react";
import SvgIcon from "#mui/material/SvgIcon";
import Button from "#mui/material/Button";
import { AppBar, IconButton, Toolbar, Typography } from "#mui/material";
import { Box, Container } from "#mui/system";
import MenuIcon from "#mui/icons-material/Menu";
import { makeStyles } from "#mui/material/styles";
const boxDefault = {};
function App() {
//const classes = useStyles();
return (
<AppBar position="fixed">
<Container fixed>
<Toolbar>
<IconButton
Edge="start"
color="inherit"
aria-label="menu"
//className={classes.menuButton}
>
<MenuIcon />
</IconButton>
<Typography variant="h5" /*className={classes.title}*/>
Hotels Ua
</Typography>
<Box mr={1}>
<Button color="inherit" variant="outlined">
Log in
</Button>
</Box>
<Box>
<Button color="secondary" variant="contained">
Sign up
</Button>
</Box>
</Toolbar>
</Container>
</AppBar>
);
}
export default App;
I found instruction how to aligh in material ui but after trying still no result....
display="flex"
justifyContent="flex-end"
alignItems="flex-end"
sx={boxDefault}
but no effect.
I am just started with mui.
Assuming that the goal is to make the logo and title to the left, and the buttons to the right on the nav bar, change the title element like this:
<Typography variant="h5" sx={{ flexGrow: 1}}/>
Hotels Ua
</Typography>
This will make the title element grow in this layout, and push the buttons to the right, which hopefully is the intended result, but do specify if not as it will help to find the proper solution.
I am using MUI MATERIAL.
I got an
It has a padding on the top,right,left of the page.
I want the App Bar to be at the very top of the page.
I tried using classes but it does not work.
components/AppBar/index.js
import * as React from "react";
import AppBar from "#mui/material/AppBar";
import Box from "#mui/material/Box";
import Toolbar from "#mui/material/Toolbar";
import Typography from "#mui/material/Typography";
import Button from "#mui/material/Button";
import IconButton from "#mui/material/IconButton";
import MenuIcon from "#mui/icons-material/Menu";
import { makeStyles } from "#mui/styles";
const useStyles = makeStyles({
root: {
backgroundColor: "#130f40",
margin: 0
}
});
export default function ButtonAppBar() {
const classes = useStyles();
return (
<Box sx={{ flexGrow: 1 }}>
<AppBar position="static" className={classes.root}>
<Toolbar>
<IconButton
size="large"
edge="start"
color="inherit"
aria-label="menu"
sx={{ mr: 2 }}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
News
</Typography>
<Button color="inherit">Login</Button>
</Toolbar>
</AppBar>
</Box>
);
}
You can add CssBaseline at the top level of your app to get rid of the space around the AppBar component. It will apply style rules from normalize.css which includes margin:0 on the body element which is the reason for this gap.
import * as React from 'react';
import CssBaseline from '#mui/material/CssBaseline';
export default function MyApp() {
return (
<React.Fragment>
<CssBaseline />
{/* The rest of your application */}
</React.Fragment>
);
}
Hello I have a problem using a style in my components in materialize:
Error: Invalid hook call. Hooks can only be called inside of the body
of a function component. This could happen for one of the following
reasons:
my code:
import React, { Component } from 'react'
import './style.css'
import {connect} from 'react-redux'
import {fetchProduct} from '../../store/actions/productsFetch';
import { makeStyles } from '#material-ui/core/styles';
import Card from '#material-ui/core/Card';
import CardActionArea from '#material-ui/core/CardActionArea';
import CardActions from '#material-ui/core/CardActions';
import CardContent from '#material-ui/core/CardContent';
import CardMedia from '#material-ui/core/CardMedia';
import Button from '#material-ui/core/Button';
import Typography from '#material-ui/core/Typography';
const useStyles = makeStyles({
card: {
maxWidth: 345,
},
});
class Description extends Component {
componentDidMount() {
this.props.fetchProduct();
}
render() {
const classes = useStyles();
return (
<div>
<Card className={classes.card}>
<CardActionArea>
<CardMedia
component="img"
alt="Contemplative Reptile"
height="140"
image="/static/images/cards/contemplative-reptile.jpg"
title="Contemplative Reptile"
/>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
Lizard
</Typography>
<Typography variant="body2" color="textSecondary" component="p">
Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging
across all continents except Antarctica
</Typography>
</CardContent>
</CardActionArea>
<CardActions>
<Button size="small" color="primary">
Share
</Button>
<Button size="small" color="primary">
Learn More
</Button>
</CardActions>
</Card>
</div>
)
}
}
const mapStateToProps = (state) => {
return{
products: state.data.filteredProducts,
loading: state.data.loading,
error: state.data.error
}
};
const mapActionsToProps = {
fetchProduct: fetchProduct
};
export default connect(mapStateToProps, mapActionsToProps)(Description);
I would need state data from my store in parts of these components, but I have no idea how to solve this
How can I autohide my Reactjs <AppBar/> component when scrolling as shown in Fig.1?
Fig.1. <AppBar/> autohides when scrolling
I am using Material-UI and my code is as follows.
MyAppBar.js
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '#material-ui/core/styles';
import AppBar from '#material-ui/core/AppBar';
import Toolbar from '#material-ui/core/Toolbar';
import Typography from '#material-ui/core/Typography';
import Button from '#material-ui/core/Button';
import IconButton from '#material-ui/core/IconButton';
import MenuIcon from '#material-ui/icons/Menu';
const styles = {
root: {
flexGrow: 1,
},
grow: {
flexGrow: 1,
},
menuButton: {
marginLeft: -12,
marginRight: 20,
},
};
function ButtonAppBar(props) {
const { classes } = props;
return (
<div className={classes.root}>
<AppBar position="static">
<Toolbar>
<IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
<MenuIcon />
</IconButton>
<Typography variant="h6" color="inherit" className={classes.grow}>
News
</Typography>
<Button color="inherit">Login</Button>
</Toolbar>
</AppBar>
</div>
);
}
ButtonAppBar.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(ButtonAppBar);
You can use Slide in conjuction with useScrollTrigger
The gist here is, useScrollTrigger will (by default) return true when you scroll down and the window vertical scrollbar position hits a certain threshold (100 pixels from origin by default) - when you scroll back up it returns false. Hence, these are the reasons why we negate it on the in prop of Slide
export default function HideAppBar() {
const trigger = useScrollTrigger();
return (
<>
<Slide appear={false} direction="down" in={!trigger}>
<AppBar>
<Toolbar>
<Typography variant="h6">Scroll Down to Hide App Bar</Typography>
</Toolbar>
</AppBar>
</Slide>
...
</>
);
}
You can use the link I gave at the top of this answer pertaining to useScrollTrigger to customize the options such as threshold
Reference: https://material-ui.com/components/app-bar/#hide-app-bar