CODEWITHSUNDEEP
javascriptreactjsfrontendnext.js
Juliette
Juliette

Reputation: 4439

stylesheet for css not being implemented for next.js components

I have the React/Next component below. I am trying to use a stylesheet to make it look better but for some reason the css is not being applied.

What do I do to fix this? I tried calling the stylesheet in pages/index.js and/or pages/_app.js but nothing changed.

Upvotes: 1

Views: 1941

Answers (3)

mikerojas
mikerojas

Reputation: 2338

Please review the docs for css modules: https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css

Adjust your import:

import styles from '../../styles/ComponentName.module.css'

Then use use it like:

<div class={styles.classname}/>

Upvotes: 0

Adam Cai
Adam Cai

Reputation: 387

That's not how CSS Modules works.

Try this:

import styles from '../../styles/Home.module.css';
...
const LoginUser = ({onChangeLoginForm, loginUser}) => {

    return(      
        <div className={styles.container}>
...

Upvotes: 1

İlker
İlker

Reputation: 2110

You have a mistake on your code. <p> tag has align attribute which doesn't exist.

Upvotes: 0

Related Questions