How to move Icons in Material UI - css

Question

How can I move my components on the image by using material UI ? I want to move my heart component to the top right corner of my image and ratings on the bottom of my image.
import image from "../../Assets/pic.jpg";
import React, { useState } from "react";
import { makeStyles } from "#material-ui/core/styles";
import Card from "#material-ui/core/Card";
import CardActionArea from "#material-ui/core/CardActionArea";
import FavoriteBorderIcon from "#material-ui/icons/FavoriteBorder";
import CardContent from "#material-ui/core/CardContent";
import CardMedia from "#material-ui/core/CardMedia";
import Typography from "#material-ui/core/Typography";
import Grid from "#material-ui/core/Grid";
import styles from "./Cards.module.css";
import Stars from "../Stars/Stars";
const useStyles = makeStyles({
root: {
maxWidth: 345,
display: "flex",
},
text: {
textAlign: "center",
color: "#333333",
},
textCardBottom: {
display: "flex",
justifyContent: "center",
},
textPrice: { color: "#333333" },
textStrike: { margin: "0px 10px 0px 10px" },
textDiscount: { color: "#ff6a6a" },
stars: {
right: 9,
},
ratings: {},
});
const Cards = () => {
const [showComponent, setShowComponent] = useState(false);
const classes = useStyles();
const handleToggleHoverIn = (event) => {
event.preventDefault();
setShowComponent(true);
};
const handleToggleHoverOut = (event) => {
event.preventDefault();
setShowComponent(false);
};
console.log("The state showComponent value is ", showComponent);
return (
<Card
onMouseEnter={handleToggleHoverIn}
onMouseLeave={handleToggleHoverOut}
className={classes.root}
>
<CardActionArea>
<CardMedia
component="img"
alt=""
image={image}
title="Contemplative Reptile"
/>
{/* {showComponent ? ( */}
<Grid container>
<Stars right="40%" /> // want this rating component on the centre of my image
<FavoriteBorderIcon fontSize="large" /> // want this heart to the top right corner
</Grid>
{/* ) : null} */}
<CardContent>
<Typography
gutterBottom
variant="h5"
component="h2"
className={classes.text}
>
Printed round Neck
</Typography>
<Typography
variant="body2"
color="textSecondary"
component="div"
className={classes.textCardBottom}
>
<Typography
variant="body2"
color="textSecondary"
component="b"
className={classes.textPrice}
>
Rs. 454
</Typography>
<Typography
variant="body2"
color="textSecondary"
component="strike"
className={classes.textStrike}
>
Rs. 699
</Typography>
<Typography
variant="body2"
color="textSecondary"
component="span"
className={classes.textDiscount}
>
(35 % off)
</Typography>
{/* <p>
<b>Rs. 454</b>
<strike>Rs. 699</strike>
<span style={{ color: "#FF7F7F" }}> (35 % off) </span>
</p> */}
</Typography>
</CardContent>
</CardActionArea>
</Card>
);
};
export default Cards;
I tried to use the position property of material UI but I wasn't able to move the components. I tried the Material UI docs but couldn't find properties that could help me moving the components.

Answer 1

did you tried to add inline styles like this:
<FavoriteBorderIcon fontSize="large" style={{ position: "absolute", top: "5px", right: "5px" }}/>
<Stars right="40%" style={{ position: "absolute", bottom: "5px" }}/>
and perhaps you need also add some position to Grid as well
<Grid style={{ position: "relative" }}>