Styled Paper - Copy this React, Mui Component to your project

import React, { useState } from "react"; import { Box, Button, Container, TextField, Typography, Grid, Link, Paper, IconButton, InputAdornment, Alert, } from "@mui/material"; import { styled } from "@mui/system"; import { FiEye, FiEyeOff, FiMail, FiLock } from "react-icons/fi"; const StyledPaper = styled(Paper)(({ theme }) => ({ padding: theme.spacing(4), display: "flex", flexDirection: "column", alignItems: "center", borderRadius: 16, boxShadow: "0 4px 20px rgba(0, 0, 0, 0.1)", backgroundColor: "#1a1a1a", })); const StyledForm = styled("form")(({ theme }) => ({ width: "100%", marginTop: theme.spacing(3), })); const StyledTextField = styled(TextField)({ "& label": { color: "#ffd700", }, "& label.Mui-focused": { color: "#ffd700", }, "& .MuiOutlinedInput-root": { color: "#ffd700", "& fieldset": { borderColor: "#ffd700", }, "&:hover fieldset": { borderColor: "#ffd700", }, "&.Mui-focused fieldset": { borderColor: "#ffd700", }, }, "& .MuiInputAdornment-root svg": { color: "#ffd700", }, }); const Auth = () => { const [isSignUp, setIsSignUp] = useState(false); const [showPassword, setShowPassword] = useState(false); const [showConfirmPassword, setShowConfirmPassword] = useState(false); const [formData, setFormData] = useState({ email: "", password: "", confirmPassword: "", }); const [error, setError] = useState(""); const handleSubmit = (e) => { e.preventDefault(); if (isSignUp && formData.password !== formData.confirmPassword) { setError("Passwords do not match"); return; } if (!validateEmail(formData.email)) { setError("Please enter a valid email address"); return; } if (formData.password.length < 6) { setError("Password must be at least 6 characters long"); return; } setError(""); console.log("Form submitted:", formData); }; const validateEmail = (email) => { return email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/); }; const handleChange = (e) => { setFormData({ ...formData, [e.target.name]: e.target.value }); }; return ( <Container component="main" maxWidth={false} sx={{ bgcolor: "#000000", minHeight: "98vh", py: 4 }}> <Box sx={{ marginTop: 8, display: "flex", flexDirection: "column", alignItems: "center", }} > <StyledPaper sx={{width:"20vw"}}> <Typography component="h1" variant="h5" sx={{ mb: 3, color: "#ffd700" }}> {isSignUp ? "Sign Up" : "Sign In"} </Typography> {error && ( <Alert severity="error" sx={{ width: "100%", mb: 2, bgcolor: "#2d2d2d", color: "#ffd700" }}> {error} </Alert> )} <StyledForm onSubmit={handleSubmit}> <Grid container spacing={2}> <Grid item xs={12}> <StyledTextField required fullWidth label="Email Address" name="email" type="email" value={formData.email} onChange={handleChange} InputProps={{ startAdornment: ( <InputAdornment position="start"> <FiMail /> </InputAdornment> ), }} /> </Grid> <Grid item xs={12}> <StyledTextField required fullWidth label="Password" name="password" type={showPassword ? "text" : "password"} value={formData.password} onChange={handleChange} InputProps={{ startAdornment: ( <InputAdornment position="start"> <FiLock /> </InputAdornment> ), endAdornment: ( <InputAdornment position="end"> <IconButton onClick={() => setShowPassword(!showPassword)} edge="end" sx={{ color: "#ffd700" }} > {showPassword ? <FiEyeOff /> : <FiEye />} </IconButton> </InputAdornment> ), }} /> </Grid> {isSignUp && ( <Grid item xs={12}> <StyledTextField required fullWidth label="Confirm Password" name="confirmPassword" type={showConfirmPassword ? "text" : "password"} value={formData.confirmPassword} onChange={handleChange} InputProps={{ startAdornment: ( <InputAdornment position="start"> <FiLock /> </InputAdornment> ), endAdornment: ( <InputAdornment position="end"> <IconButton onClick={() => setShowConfirmPassword(!showConfirmPassword) } edge="end" sx={{ color: "#ffd700" }} > {showConfirmPassword ? <FiEyeOff /> : <FiEye />} </IconButton> </InputAdornment> ), }} /> </Grid> )} </Grid> {!isSignUp && ( <Link href="#" variant="body2" sx={{ display: "block", mt: 2, mb: 2, color: "#ffd700" }} > Forgot password? </Link> )} <Button type="submit" fullWidth variant="contained" sx={{ mt: 3, mb: 2, py: 1.5, backgroundColor: "#ffd700", color: "#000000", "&:hover": { backgroundColor: "#ccac00", }, }} > {isSignUp ? "Sign Up" : "Sign In"} </Button> <Grid container justifyContent="center"> <Grid item> <Link href="#" variant="body2" onClick={() => { setIsSignUp(!isSignUp); setError(""); setFormData({ email: "", password: "", confirmPassword: "", }); }} sx={{ color: "#ffd700" }} > {isSignUp ? "Already have an account? Sign In" : "Don't have an account? Sign Up"} </Link> </Grid> </Grid> </StyledForm> </StyledPaper> </Box> </Container> ); }; export default Auth;