https://i.sstatic.net/EVdO8.png
My cards created using material-UI are displaying strangely when the page loads or re-loads. Initially, they look different with no apparent CSS styling, but after a few seconds, they appear as intended. I'm not sure if this is something on my end or just how Material-UI operates.
import React, { Component } from 'react';
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';
class ImgMediaCard extends Component {
constructor(props){
super(props)
}
render(){
return (
<div className="Cards-div">
<Card className="Cards">
<CardActionArea>
<CardMedia
component="img"
alt={this.props.imgAlt}
height="300"
image={this.props.imgLink}
title={this.props.imgTitle}
/>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
{this.props.title}
</Typography>
<Typography variant="body2" color="textSecondary" component="p">
{this.props.text}
{this.props.technologies}
</Typography>
</CardContent>
</CardActionArea>
<CardActions>
<Button size="small" color="primary">
Visit
</Button>
</CardActions>
</Card>
</div>
)};
}
export default ImgMediaCard;
Github repository: https://github.com/Kohdz/port