Entrar Ainda não tem acesso?
4
respostas

Meu css não está aplicando as mudanças na página...

Referente ao curso Next.js: conheça o framework React, no capítulo Criando um card para os posts e atividade Mão na massa: estilos do card

por João Victor Pires Nascimento Dos Santos
| 47.8k xp | 28 posts

Estou com problemas para aplicar o CSS na página, já até testei copiando e colando a resposta do professor mas não muda em nada... o código está assim:

import Image from 'next/image'
import { Avatar } from '../Avatar'
import styles from './cardpost.module.css'

export function CardPost ({ post }) {
    return (
        <article className={styles.card}>
            <header>
                <figure>
                    <Image 
                        src={post.cover} 
                        width={438} 
                        height={133} 
                        alt={`Capa do post de título: ${post.title}`}
                    />
                </figure>
            </header>
            <section className={styles.body}>
                <h2>{post.title}</h2>
                <p>{post.body}</p>
            </section>
            <footer>
                <Avatar
                    imageSrc={post.author.avatar} 
                    name={post.author.username}
                />
            </footer>
        </article>
    )
}

E o css(ainda estou escrevendo ele):

.card {
    width: 486px;
    height: 431px;
    background: #171D1F;
}

.header {
    border-radius: 8px 8px 0px 0px;
}

.body {
    color: #BCBCBC;
}

As mudanças só acontecem se eu as faço no .card, no .header não está acontecendo nada. E eu já tentei colocar na tag header um classname={styles.header}, mas não muda

4 respostas
por Vinicios Neves
| 1001.4k xp | 1104 posts
Instrutor Tech Lead | Tech Educator

Salve, João!

No código de exemplo que você postou aqui ficou faltando vincular os estilos:


<header className={styles.header}>

Vi que vc falou que já tentou, mas acho que vale o text ;) Se mesmo assim não funcionar, manda o link do repositório no github que a gente vê o que tá rolando :)

por João Victor Pires Nascimento Dos Santos
| 47.8k xp | 28 posts

Fiquei atolado com trabalho e tive que pausar o curso, mas taí o link! Tentei chamar o css na tag header de novo mas continuo na mesma...

https://github.com/JoaoSortudo/code-connect

por Vinicios Neves
| 1001.4k xp | 1104 posts
Instrutor Tech Lead | Tech Educator

João, os estilos estão sendo aplicados :)

Mas faltam coisas!

Hoje você tem esses estilos:

.card {
    width: 486px;
    height: 431px;
    background: #171D1F;
}

.header {
    border-radius: 8px 8px 0px 0px;
}

.body {
    color: #BCBCBC;
}

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Mas falta bastante coisa. Dá uma olhada aqui na atividade, na opinião do instrutor, que você consegue conferir o gabarito da resposta completo, mas o cardpost.module.css fica assim:


.card {
    width: 486px;
    border-radius: 8px;
    background: #171D1F;
}

.header {
    border-radius: 8px 8px 0px 0px;
    background: #888;
    padding: 24px;
}

.header figure {
    margin: 0;
}

.body {
    color: #BCBCBC;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.body h2 {
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%; 
    margin: 0;
}

.body p {
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    margin: 0;
    flex-grow: 1;
}

.footer {
    padding: 16px;
}

E o src/components/CardPost/index.jsx:


import Image from 'next/image'
import { Avatar } from '../Avatar'
import styles from './cardpost.module.css'

export function CardPost ({ post }) {
    return (
        <article className={styles.card}>
            <header className={styles.header}>
                <figure>
                    <Image 
                        src={post.cover} 
                        width={438} 
                        height={133} 
                        alt={`Capa do post de título: ${post.title}`}
                    />
                </figure>
            </header>
            <section className={styles.body}>
                <h2>{post.title}</h2>
                <p>{post.body}</p>
            </section>
            <footer className={styles.footer}>
                <Avatar
                    imageSrc={post.author.avatar} 
                    name={post.author.username}
                />
            </footer>
        </article>
    )
}
por João Victor Pires Nascimento Dos Santos
| 47.8k xp | 28 posts

você não entendeu, mesmo que eu copie e cole exatamente igual, não muda nada na pagina