How To Style And Write CSS In React

App.tsx

import * as React from "react";
import Container from "@mui/material/Container";
import Typography from "@mui/material/Typography";
import Box from "@mui/material/Box";
import Link from "@mui/material/Link";
import Stack from '@mui/material/Stack';
import Rating from '@mui/material/Rating';
import CircularProgress from '@mui/material/CircularProgress';
import Card from '@mui/material/Card';
import CardActions from '@mui/material/CardActions';
import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';
import Button from '@mui/material/Button';
 
 
function Copyright() {
 return (
   <Typography variant="body2" color="text.secondary" align="center">
     {"Copyright © "}
     <Link color="inherit" href="https://lambdatest.com/">
       Your Website
     </Link>{" "}
     {new Date().getFullYear()}.
   </Typography>
 );
}
 
export default function App() {
 const [value, setValue] = React.useState<number | null>(2);
 
 return (
   <Container maxWidth="sm">
     <Box sx={{ my: 4 }}>
       <Typography variant="h4" component="h1" gutterBottom>
         Material UI{" "}
       </Typography>
 
       <Typography variant="h4" component="h1" gutterBottom>
         The React UI library you always wanted{" "}
       </Typography>
 
       <Card sx={{ maxWidth: 345 }}>
     <CardMedia
       component="img"
       height="140"
       image="https://mui.com/static/images/cards/contemplative-reptile.jpg"
       alt="green iguana"
     />
     <CardContent>
       <Typography gutterBottom variant="h5" component="div">
         Lizard
       </Typography>
       <Typography variant="body2" color="text.secondary">
         Lizards are a widespread group of squamate reptiles, with over 6,000
         species, ranging across all continents except Antarctica
       </Typography>
     </CardContent>
     <CardActions>
       <Button size="small">Share</Button>
       <Button size="small">Learn More</Button>
     </CardActions>
   </Card>
 
       <Stack sx={{ color: 'grey.500',marginTop:"12px" }} spacing={2} direction="row">
     <CircularProgress color="secondary" />
     <CircularProgress color="success" />
     <CircularProgress color="inherit" />
   </Stack>
       <Box
     sx={{
       '& > legend': { mt: 2 },
     }}
   >
     <Typography component="legend">Give us 5 star</Typography>
     <Rating
       name="simple-controlled"
       value={value}
       onChange={(event, newValue) => {
         setValue(newValue);
       }}
     />
   </Box>
 
       {/* <ProTip /> */}
       <Copyright />
     </Box>
   </Container>
 );
}