Why is my Styled-Components (React dependacy) not working?-CodePudding

Actually, I have two questions

The First one is that Why is the following code using styled-components not working, I removed node modules, installed it again globally etc and it's not working. The output render is blank.
Am I using the Pseudo classes correctly in styled components If not please show me
I would really appreciate it if you could show me through the code I have.
I will List my Js file plus the desired CSS below, I only want the CSS through styled-components

    import React, { useRef} from "react";
            import ReactDOM from 'react-dom/client';
            import Home from "../Dashboard/Home";
            import App from '../../App';
            import Bye from "./Login"
            import styled from "styled-components"
            function Register(){
               const name=useRef()
               const email=useRef()
               const password=useRef()
               const root = ReactDOM.createRoot(document.getElementById('root'));
               const handleClick=()=>{
                   if(name.current.value&&email.current.value&&password.current.value)
                  {
                    localStorage.setItem("name",name.current.value)
                    localStorage.setItem("email",email.current.value)
                    localStorage.setItem("password",password.current.value)
                    localStorage.setItem("signUp",email.current.value)
                    alert("Account created successfully!!")
                    root.render(
                        <React.StrictMode>
                        <Home/>
                      </React.StrictMode>
                      );
                  }
               }
        
           const goHome=()=>{
            root.render(
                <React.StrictMode>
                <App />
              </React.StrictMode>
              );
            }
        
            const handleSignIn=()=>{
                root.render(
                    <React.StrictMode>
                    <Bye />
                  </React.StrictMode>
                  );
                }
        
            const Body = styled.div`
            margin: 0;
            padding: 0;
            font-family: 'Poppins', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: black;
            `
            const Box = styled.div`
            position: relative;
     
         width: 600px;
          height: 540px;
          background: #1c1c1c;
          border-radius: 8px;
          overflow: hidden;
        
          &:before{
            content: "";
          position: absolute;
          top: -50px;
          left: -50px;
          width: 600px;
          height: 440px;
          transform-origin: bottom right;
          background: linear-gradient(0deg, transparent, transparent, #45f3ff, #45f3ff);
          animation: animate 6s linear infinite
          }
        
            `
          const Title = styled.h2`
    
          align-items: center;
          color: #45f3ff;
          font-size: 25px;
          font-weight: 500;
          `
          
          
            return(
                <Body>
                <Box>
                 <div className="form">
                     <Title>Hello Lets Get you Started</Title>
                     <div className="inputBox">
                    <input type="text"required="required" ref={name}/>
                    <span>Your Full Name: </span>
                    <i></i>
                   </div>
                   <div className="inputBox">
                    <input type="text"required="required" ref={email}/>
                    <span>Your Email: </span>
                    <i></i>
                   </div>
        
                   <div className="inputBox">
                    <input type="password" required="required" ref={password}/>
                    <span> Your Password: </span>
                    <i></i>
                   </div>
        
                  <div >
                  <button className="btn-2 btn" onClick={handleSignIn}> Sign In</button>
                  <button className="btn-3 btn" onClick={goHome}>Return Home</button>
                  </div>
                   
                   <button type="submit" className="btn-1" onClick={handleClick}>Sign Up </button>
                     </div>
                </Box>
                    
              </Body>
                        )
                    }
        
        export default Register;

thats my JS file (not jsx)

below is the desired Css

     @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700,800,900,&display=swap');
        .body{
          margin: 0;
          padding: 0;
          font-family: 'Poppins', sans-serif;
          display: flex;
          justify-content: center;
          align-items: center;
          min-height: 100vh;
          background: black;
          
        }
        
        .box{
          position: relative;
          width: 600px;
          height: 540px;
          background: #1c1c1c;
          border-radius: 8px;
          overflow: hidden;
        }
        
        .title{
          align-items: center;
          color: #45f3ff;
          font-size: 25px;
          font-weight: 500;
        
        }
        
        .box::before{
          content: "";
          position: absolute;
          top: -50px;
          left: -50px;
          width: 600px;
          height: 440px;
          transform-origin: bottom right;
          background: linear-gradient(0deg, transparent, transparent, #45f3ff, #45f3ff);
          animation: animate 6s linear infinite
        }
        
        .box::after{
          content: "";
          position: absolute;
          top: -50px;
          left: -50px;
          width: 600px;
          height: 440px;
          background: linear-gradient(0deg, transparent, #45f3ff, #45f3ff);
            transform-origin: bottom right;
          animation: animate 6s linear infinite;
          animation-delay: -3s;
        }
        
        
        
        @keyframes animate{
          0%{
            transform: rotate(0deg)
          }
          100%{
            transform: rotate(360deg)
          }
        }
        
        .form{
          position: absolute;
          inset: 2px;
          border-radius: 8px;
          background: #28292d;
          z-index: 10;
          padding: 50px 40px;
          display: flex;
        flex-direction: column;
        }
        
        .inputBox span{
            display: flex;
            justify-content: space-between;
            margin-right: 55px;
            margin-top: -60px;
            font-size: 18px;
            font-weight: 500;
            left: 0;
            padding: 20px 10px 10px;
            pointer-events: none;
            letter-spacing: 0.05em;
            transition: 0.5s
        }
        
        .inputBox{
            position: relative;
            width: 300px;
            margin-top: 35px;
        }
        
        .inputBox input{
            position: relative;
            width: 165%;
            padding: 20px 10px 10px;
            background: transparent;
            border: none;
            text-align: left;
            font-weight: 500;
            outline: none;
            color: black;
            font-size: 1em;
            letter-spacing: 0.05em;
            font-size: 20px;
            z-index: 10;
        }
        
        .btn-1{
            margin-top: 30px;
            pointer-events: auto;
            cursor: pointer;
        }
        
        .Links{
            margin-top: 25px;
        }
        
        .btn-2{
        display: flex;
        align-items: left;
        margin-top: -10px;
        font-size: 1.25em;
        border: none;
            outline: none;
            background: none;
            padding: 0;
            color: #8f8f8f;
            cursor: pointer;
        
        
        }
        
        .Links button:hover
        {
            color: #45f3ff;
        }
        
        .btn-3{
            display: flex;
            flex-direction: column;
            margin-left: 25rem;
            margin-top: -20px;
            font-size: 1.25em;
            cursor: pointer;
            border: none;
            outline: none;
            background: none;
            padding: 0;
            color: #8f8f8f;
        
        }
        
        .inputBox input:valid ~ span,
        .inputBox input:focus ~ span
        {
            color: #45f3ff;
            transform: translateY(-44px);
            font-size: 1.25em;
        }
        
        .inputBox i{
            position: absolute;
            left: 0;
            bottom: -7px;
            width: 170%;
            height: 2px;
            background: #45f3ff;
            border-radius: 4px;
            transition: 0.5s;
            pointer-events: none;
            z-index: 9;
        }
        
        .inputBox input:valid ~ i,
        .inputBox input:focus ~ i
        {
           height: 55px;
           width: 170%;
           top: 2px;
        }
        
        .btn-1{
            border: none;
            outline: none;
            background: #45f3ff;
            padding: 11px 25px;
            width: 100px;
            margin-top: 10px;
            border-radius: 4px;
            font-weight: 600;
            cursor: pointer;
        }
        
        .btn-1:active{
            opacity: 0.8
        }

CodePudding user response：

It is important to define your styled components outside of the main react component, otherwise it will be recreated on every single render pass. Defining a styled component within the react component will prevent caching and drastically slow down rendering speed, and should be avoided.

import React, { useRef } from 'react';
import ReactDOM from 'react-dom/client';
import styled from 'styled-components';

const Body = styled.div`
            margin: 0;
            padding: 0;
            font-family: 'Poppins', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            `;
const Box = styled.div`
            position: relative;
     
         width: 600px;
          height: 540px;
          border-radius: 8px;
          overflow: hidden;
        
          &:before{
            content: "";
          position: absolute;
          top: -50px;
          left: -50px;
          width: 600px;
          height: 440px;
          transform-origin: bottom right;
          animation: animate 6s linear infinite
          }
        
            `;
const Title = styled.h2`
          align-items: center;
          font-size: 55px;
          font-weight: 600;
          color: red;
          `;

function App() {
  const name = useRef();
  const email = useRef();
  const password = useRef();

  const handleClick = () => {
    if (name.current.value && email.current.value && password.current.value) {
      localStorage.setItem('name', name.current.value);
      localStorage.setItem('email', email.current.value);
      localStorage.setItem('password', password.current.value);
      localStorage.setItem('signUp', email.current.value);
      alert('Account created successfully!!');
    }
  };

  const goHome = () => {};

  const handleSignIn = () => {
    root.render();
  };

  return (
    <Body>
      <Box>
        <div className='form'>
          <Title>Hello Lets Get you Started</Title>
          <div className='inputBox'>
            <input type='text' required='required' ref={name} />
            <span>Your Full Nameeee: </span>
          </div>
          <div className='input-box'>
            <input type='text' required='required' ref={email} />
            <span>Your Email: </span>
            <i></i>
          </div>

          <div className='input-box'>
            <input type='password' required='required' ref={password} />
            <span> Your Password: </span>
          </div>

          <div className='Links'>
            <button className='btn-2 btn' onClick={handleSignIn}>
              {' '}
              Sign In
            </button>
            <button className='btn-3 btn' onClick={goHome}>
              Return Home
            </button>
          </div>

          <button type='submit' className='btn-1' onClick={handleClick}>
            Sign Up{' '}
          </button>
        </div>
      </Box>
    </Body>
  );
}

export { App };

CodePudding user response：

Here is my solution. Keep styled component outside of Register component.

import React, { useRef } from 'react';
import ReactDOM from 'react-dom/client';
import Home from '../Dashboard/Home';
import App from '../../App';
import Bye from './Login';
import styled from 'styled-components';

const Body = styled.div`
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: black;
`;
const Box = styled.div`
  position: relative;

  width: 600px;
  height: 540px;
  background: #1c1c1c;
  border-radius: 8px;
  overflow: hidden;

  &:before {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    width: 600px;
    height: 440px;
    transform-origin: bottom right;
    background: linear-gradient(
      0deg,
      transparent,
      transparent,
      #45f3ff,
      #45f3ff
    );
    animation: animate 6s linear infinite;
  }
`;
const Title = styled.h2`
  align-items: center;
  color: #45f3ff;
  font-size: 25px;
  font-weight: 500;
`;

function Register() {
  const name = useRef();
  const email = useRef();
  const password = useRef();
  const root = ReactDOM.createRoot(document.getElementById('root'));
  const handleClick = () => {
    if (name.current.value && email.current.value && password.current.value) {
      localStorage.setItem('name', name.current.value);
      localStorage.setItem('email', email.current.value);
      localStorage.setItem('password', password.current.value);
      localStorage.setItem('signUp', email.current.value);
      alert('Account created successfully!!');
      root.render(
        <React.StrictMode>
          <Home />
        </React.StrictMode>
      );
    }
  };

  const goHome = () => {
    root.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>
    );
  };

  const handleSignIn = () => {
    root.render(
      <React.StrictMode>
        <Bye />
      </React.StrictMode>
    );
  };

  return (
    <Body>
      <Box>
        <div className="form">
          <Title>Hello Lets Get you Started</Title>
          <div className="inputBox">
            <input type="text" required="required" ref={name} />
            <span>Your Full Name: </span>
            <i></i>
          </div>
          <div className="inputBox">
            <input type="text" required="required" ref={email} />
            <span>Your Email: </span>
            <i></i>
          </div>

          <div className="inputBox">
            <input type="password" required="required" ref={password} />
            <span> Your Password: </span>
            <i></i>
          </div>

          <div >
            <button className="btn-2 btn" onClick={handleSignIn}>
              {' '}
              Sign In
            </button>
            <button className="btn-3 btn" onClick={goHome}>
              Return Home
            </button>
          </div>

          <button type="submit" className="btn-1" onClick={handleClick}>
            Sign Up{' '}
          </button>
        </div>
      </Box>
    </Body>
  );
}

export default Register;

Hope this help you.