Entrar Ainda não tem acesso?
3
respostas

borderColor não funciona

Referente ao curso React: desenvolvendo com JavaScript

por Rafael Bazzanella
| 5.8k xp | 3 posts

No componente time,

"const Time = (props) => {

   const css = {borderBottom: props.corPrimaria
   }

    return(
        <section className='time' style={{ backgroundColor: props.corSecundaria}}>

          <h3 sytle={css}>{props.nome}
          </h3>

        </section>

    )



}


export default Time
"

 ele retorna as cores do background ok, porém no css do h3 ele retorna o border-bottom-color: Inicial;

CSS abaixo:
!!!(css do console)!!!


"    border-bottom: 4px solid;
    border-bottom-width: 4px;
    border-bottom-style: solid;
    border-bottom-color: initial;
"

Como corrigir isso?

3 respostas
por Renan Lima
| 3932.1k xp | 8320 posts
Alura Scuba Team Apoio Educacional - Alura

Olá Rafael, tudo bem?

Pelo que entendi, você está tentando definir a cor da borda inferior do elemento h3, mas está obtendo a cor "initial" no console. Isso pode estar acontecendo porque você não definiu explicitamente a cor da borda inferior no objeto css que você criou.

Para corrigir isso, você pode adicionar a propriedade "borderBottomColor" ao objeto css, definindo a cor da borda inferior que você deseja. Por exemplo:

const css = {
  borderBottom: "4px solid",
  borderBottomColor: props.corPrimaria
}

Dessa forma, a cor da borda inferior do elemento h3 será definida de acordo com a propriedade "corPrimaria" que você passou como prop para o componente.

Espero ter ajudado e bons estudos!

por Rafael Bazzanella
| 5.8k xp | 3 posts

Então mano, na real, no curso, tá sendo renderizado um componente dentro de um map no react que joga o props pra renderizar cada um de uma array de objetos. O css tá border-bottom: 4px solid, sem definir a cor. Ai no react tá "style={borderColor: props.corPrimaira}". A ideia era jogar uma cor diferente para cada um, no curso rola, mas tá quebrando pra mim.

por Rafael Bazzanella
| 5.8k xp | 3 posts

Aaaaa, eu entendi agora, eu deleto o 4x solid do css mesmo e jogo isso dentro dessa const pra jogar dentro do style né? Vou tentar aqui mano! Obrigado!