Entrar Ainda não tem acesso?
1
resposta

Css não funciona quando uso a pasta Item

Referente ao curso React: escrevendo com Typescript, no capítulo Props e atividade Refatorando a lista

por João Vitor Da Silva Oliveira
| 17.8k xp | 2 posts

Quando utilizo a pasta para usar a função item meu a parte da lista fica sem o css desse jeito:

Insira aqui a descrição dessa imagem para ajudar na acessibilidademeu código está assim do Lista/Item/index.tsx import style from '../Lista.module.scss';

function Item({ tarefa, tempo }: { tarefa: string, tempo: string }) { return (

  • {tarefa}

    {tempo}
  • ) }

export default Item;

e o index da lista/index.tsx está assim: import React from 'react'; import Item from './Item'; import style from './Lista.module.scss';

function Lista() { const tarefas = [{ tarefa: 'React', tempo: '02:00:00' }, { tarefa: 'Javascript', tempo: '01:00:00' }, { tarefa: 'Typecript', tempo: '03:00:00' }] return (

Estudos do dia

  • {tarefas.map((item, index) => ( ))}
) }

export default Lista;

alguém poderia me ajudar??

1 resposta
por Gabriel Guilherme Santos Fernandes
| 67.9k xp | 4 posts
Estagiário

acho que você esqueceu de adicionar o className={style.item}. Ja que no React pra colocar o CSS em um componente se utiliza className={style.NomeDoCSS}.

No meu o arquivo Item ta assim: 

import style from '../Lista.module.scss'

export default function Item({tarefa, tempo}: {tarefa: string, tempo: string}) {
    return (
        <li className={style.item}>
            <h3>{tarefa}</h3>
            <span>{tempo}</span>
        </li>
    )
}