weird lines appearing?
Answered
futuredevengineer posted this in #help-forum
31 Replies
nothing added in css
actually, the bigger issue is that global.css is not taking effect at all.
Then you might be taking a look at some wrong global.css
Go to your root layout and check if its imported there
sent duplicated images by mistake, oops
Should work. Is your globals.css completely empty?
Also im pretty sure you dont have to name the global style "global.css" but try changing from
globals.css
to global.css
that was there by default
I really dont know what the issue is then. This usually happens due to removing everything in page.tsx while keeping the styling from global.css
What does your page.ts file look like?
the one in the highest level of
app
folder hasn't been changed at all.Then how do you even have those inputs and buttons?
oh you are speaking specifically about this route
hold on
Does the route you are currently on have a global css / stylesheet? And what does its layout (if any) look like?
I was assuming this is the root route
I was assuming this is the root route
"use client";
import React from "react";
import {useState, useEffect} from 'react'
import { redirect } from "next/navigation";
function SignUp(){
return(
<div className='signupMain'>
<div className='signupContainer'>
<form method='POST' onSubmit={handleSubmit}>
<input className='email' type='text' placeholder='Enter your email address' name="email" value={userInfo?.email} onChange={handleChange}/>
<input className='username' type='text' placeholder='Enter your username' name='username' value={userInfo?.username} onChange={handleChange}/>
<input className='password' type='password' placeholder='Enter your password' name='password' value={userInfo?.password} onChange={handleChange}/>
<input className='location' type='text' placeholder='Enter your location here' name='location' value={userInfo?.password} onChange={handleChange}/>
<input className='birthdate' type='date' placeholder='Enter your birthdate' name='birthdate' value={userInfo?.birthdate as unknown as string} onChange={handleChange}/>
<input className='bio' type='text' placeholder='Enter your bio here' name='bio' value={userInfo?.bio} onChange={handleChange}/>
<input className='profVis' type='text' name='isVisible' placeholder='Do you want your profile to be visible' value={userInfo?.isVisible as unknown as string} onChange={handleChange}/>
<div className='errorDiv'>{error}</div>
<button type='submit' className='subBtn'>Sign up</button>
</form>
</div>
</div>
)
}
export default SignUp;
I trimmed part of the code cause discord has word limit
@Clown this might sound confusing but nextjs keep throwing this at me even tho i don't have
toString
property anywhere in my codethis happen when i try to type something
ohhh, i figured out why
i am running the server as in production lmao
Answer
Seems like you have some stylesheet somewhere
Cause you are using classnames
no no it is because i was running on production lol
npm start
instead of npm run dev
Damn i literally dont have any idea lol. Maybe its cursed ðŸ˜. Try clearing .next and .node_modules and running
Also npm start doesn't hot reload so make sure you are on npm run dev
OHHHH
ðŸ˜ðŸ˜ðŸ˜
yeah, that was the solution
that why global css wasn't updating