3
respostas

cores dos cards não aparecem

import Colaborador from '../Colaborador'
import './Time.css'
const Time = (props)=>{
    return(
    
       (props.tecnologia.length> 0 ) &&<section className='time' style={{backgroundColor:props.corSecundaria}}>
            <h3 style={{borderColor:props.corPrimaria}}> {props.nome}</h3>
            <div className='colaboradores'>
                {props.tecnologia.map(tecnologia=> <Colaborador cordeFundo={props.corPrimaria} key={tecnologia.nome} tecnologia ={tecnologia.tecnologia} tipo={tecnologia.tipo} imagem={tecnologia.imagem}/>)}
            </div>
        </section>
    )
}
export default Time

As cores dos cards não alteram com o código

![](Insira aqui a descrição dessa imagem para ajudar na acessibilidade )

3 respostas

Olá, Alessandra, como vai?

O problema com as cores nos seus cards pode estar relacionado a como as props corPrimaria e corSecundaria estão sendo passadas e utilizadas no componente Time.

No trecho de código que você compartilhou, as cores estão sendo aplicadas dinamicamente através de estilos inline, certifique-se de que está passando corretamente as props corPrimaria e corSecundaria no componente Time no momento em que ele é chamado.

Se mesmo com esses ajustes o problema persistir, você poderia me fornecer o código do seu projeto? Se puder, envie pelo GitHub, assim consigo ter acesso a todo o código e te ajudar de forma mais precisa.

Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado

olá, não consegui identificar conforme vc explicou. segue o meu git conforme solicitou para verificação https://github.com/AlessandraSantanna/organo.git

Oi, Alessandra.

O problema acontece por que no componente Time, você está passando a props como cordeFundo, mas em Colaborador, você está recebendo a props como corDeFundo, com o D em maiúsculo. Por isso a cor não está sendo passada corretamente.

const Time = (props)=>{
    return(
    
       (props.tecnologia.length> 0 ) &&<section className='time' style={{backgroundColor:props.corSecundaria}}>
            <h3 style={{borderColor:props.corPrimaria}}> {props.nome}</h3>
            <div className='colaboradores'>
                {props.tecnologia.map(tecnologia=> <Colaborador corDeFundo={props.corPrimaria} key={tecnologia.nome} tecnologia ={tecnologia.tecnologia} tipo={tecnologia.tipo} imagem={tecnologia.imagem}/>)}
            </div>
        </section>
    )
}

Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado