Next.js Discord

Discord Forum

Classes not being set

Answered
Barbary Lion posted this in #help-forum
Open in Discord
Barbary LionOP
import globals from "../styles/global.module.css"
import Navbar from "../components/navbar.js"
import Sidebar from "../components/sidebar.js"


export default function MyApp({ Component, pageProps }) {
    return (
        <div className={globals.main}>
            <Navbar className={globals.Navbar}/>
    
            <Sidebar className={globals.Sidebar}/>
            <Component {...pageProps} />
        </div>
        );
  }

For some reason only the first div is getting it's class set.
Answered by riský
you need to update the component to accept the input
export default function Navbar({ className }){
    return (
        <div className={className}>
View full answer

67 Replies

riský
what does your ../styles/global.module.css file look like?
Barbary LionOP
.main{
display: grid;
grid-template-columns: 1fr 9fr;
grid-template-rows: 1fr 9fr;
margin: 0;
border: 1px solid black;

}

.navbar {
grid-row: 1 / 2;
grid-column: 1 / 3;
border: 10px solid black;
}

.sidebar {
grid-row: 2 / 3;
grid-column: 1 / 2;
}

.content {
grid-row: 2 / 3;
grid-column: 2 / 3;}
I've done all my files in 100 different ways to try and fix this
riský
you are using Navbar in component, and defining navbar in css, you should choose one case
Barbary LionOP
Yeah sorry I've gone a bit schizofrenic after doing this for so many hours. But that's not the issue, it's not setting any class at all.
riský
please show your updated code then...
Barbary LionOP
riský
your component code and css file
Barbary LionOP
.main{
    display: grid;
    grid-template-columns: 1fr 9fr;
    grid-template-rows: 1fr 9fr;
    margin: 0;
    border: 1px solid black;

}

.navbar {
    grid-row: 1 / 2;
    grid-column: 1 / 3;
    border: 10px solid black;
  }
  
  .sidebar {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
  }
  
  .content {
    grid-row: 2 / 3;
    grid-column: 2 / 3;}
`
Clown
Firstly that should be globals.navbar not globals.Navbar
Barbary LionOP
import globals from "../styles/global.module.css"
import Navbar from "../components/navbar.js"
import Sidebar from "../components/sidebar.js"


export default function MyApp({ Component, pageProps }) {
    return (
        <div className={globals.main}>
            <Navbar className={globals.navbar}/>
    
            <Sidebar className={globals.sidebar}/>
            <Component {...pageProps} />
        </div>
        );
  }
Clown
Same with sidebar
Barbary LionOP
Yeah I've fixed that, I've rewritten and tried 20 different things so it's gotten a bit scrambled
Barbary LionOP
but it's not defining any class at all
@riský your component code and css file
Barbary LionOP
You want to see Navbar and sidebar?
riský
yes
Barbary LionOP
Is that relevant though, because I'm using a different CSS file for components, I'm only trying to customize their placements in the grid.

import styles from "./navbar.module.css";
import Link from "next/link";
import Image from "next/image";
import logo from "../public/images/logo.png"
import box from "../public/images/box.png"
import battle from "../public/images/battle.png"

export default function Navbar(){
    return(
        <div>
        <header className={styles.header}>

            <div className={styles.nav}>
                <div className={styles.title}>
                    <Link href="../pages/index.js"><Image src={logo} width="40" height="40" alt="Logo"/></Link>
                    <p>Milady</p>
                </div>
                <div className={styles.logoSeperator}></div>
                <ul className={styles.ul}>
                    <li>
                    <Link href="../pages/index.js"><Image src={box} width="20" height="20" alt="Logo"/>Box</Link>
                    </li>
                    <li>
                    <Link href="../pages/index.js"><Image src={battle} width="20" height="20" alt="Logo"/>Battle</Link>
                    </li>
                </ul>
            </div>


            <div className={styles.Finance}>
                <div className={styles.balance}>

                    <p>1,323</p>
                    <div className={styles.box1}/>
                    <div className={styles.box2}/>
                    <div className={styles.box3}/>
                </div>
                <div className={styles.deposit}>
                    <div className={styles.depositBox}>
                        <svg>
                            <rect  width="2px" height="24px" />
                            <rect  width="2px" height="24px" />
                        </svg>
                    </div>
                </div>
            </div>

            <Link href="../pages/index.js">
                <div className={styles.identity}>
                    <Image src={logo} width="20" height="20" alt="Logo"/>
                    <p>Xation</p>
                    <div className={styles.box_1}/>
                    <div className={styles.box_2}/>
                    <div className={styles.box_1}/>
                </div>
            </Link>


        </header>
        </div>
        
    );
}
`
Thank you very much for helping
Ignore all the mess, I'm just trying to figure out this issue specifically
riský
navbar doesn't accept the className prop
Barbary LionOP
Does it need too?

I'm just adjusting the compenents grid in globals
Doesn't this <div className={globals.main}> already define the classname?
riský
you need to update the component to accept the input
export default function Navbar({ className }){
    return (
        <div className={className}>
Answer
Barbary LionOP
GPT4 told me that too but I asked him him if doing it in global was fine and he assured me it was
Let me try
Barbary LionOP
Would you look at that...
5 hours and that was the issue
Would you mind explaining why naming it from _app doesn't work?
riský
are you using tsx or jsx tho?
Barbary LionOP
JSX
Clown
Im not sure about jsx, but tsx would have probably warned about that
riský
yeah in that case, my example works
@Clown Im not sure about jsx, but tsx would have probably warned about that
riský
iirc by default TS in vscode doesn't analyses js files and throw errors
but typescript it should tell you that it isn't valid
Barbary LionOP
RIP
@Barbary Lion Would you mind explaining why naming it from _app doesn't work?
Barbary LionOP
I can't wrap my head around why it doesn't work
Because calling the component
returns that div so I set the class for that div?
riský
i don't understand your question
Barbary LionOP
Why my method doesn't work.

<Navbar className={}/>
Why doesn't this set the class for the div?
riský
and... what does your Navbar code look like?
Barbary LionOP
No, I mean it works now
your code works
but I'm wondering why mine didn't
and why it can't be set directly from _app
riský
how much of react do you know? as this is one of the basic things...
Barbary LionOP
Apperently not enough
thank you very much for your help
riský
but your orig question is answered?
Barbary LionOP
Yes it is
riský
YAY!
so you should try and understand how components work, and this should make more sense :)
and if you have any more questions, you should be able to ask them here (as long as you took some time to really understand it)
Barbary LionOP
Yeah, thank you. I will definently get better at react.
I also had one question which I ran into the docs earlier
riský
can you open a new thread for it tho
Barbary LionOP
I can but it's a simple question
about the tutorial
In the docs tutorial they named the global css global.css but I had to name it global.module.css for it to work. Will it still affect all elements?
I'm assuming it won't?
riský
do you understand css modules... if not, you should research about them...
Barbary LionOP
Yeah, it won't do that.
Ok, thank you for helping out