3
respostas

Não assume a cor da props

import styled from "styled-components"

const TitleStyled = styled.h2`
    width: 100%;
    padding: 30px 0;
    background-color: #FFF;
    color: ${props => props.color || "#EB9B00"}
    font-size: 36px;
    text-align: center;
    margin: 0;
`

export default TitleStyled;
import { books } from "../SearchBarComponent/mockedSearchData"
import styled from "styled-components"
import TitleStyled from "../Title"

const LastLaunchingsStyled = styled.section`
    background-color: #EBECEE;
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
`

const NewBooksStyled = styled.div`
    margin-top: 30px;
    display: flex;
    width: 100%;
    justify-content: center;
    cursor: pointer;
`

Os dois h2 ficam da cor preta


function LastLaunchings(){
    return (
        <LastLaunchingsStyled>
        <TitleStyled>"IOOI"</TitleStyled>
        <TitleStyled color="#000">"IOOI"</TitleStyled>
        <NewBooksStyled>
        {books.map(book => (
            <img src={book.src}></img>
        ))}
        </NewBooksStyled>
        </LastLaunchingsStyled>
    )
}

export default LastLaunchings
3 respostas

Parece que o problema está relacionado ao uso das propriedades no componente TitleStyled. O valor da propriedade color não está sendo aplicado corretamente, pois o valor passado está dentro de aspas na chamada do componente. Quando você coloca o valor entre aspas, ele é tratado como uma string literal, e não como um valor de cor. Vamos corrigir isso.

Aqui está como o código deve ficar:

Componente TitleStyled

import styled from "styled-components"

const TitleStyled = styled.h2
    width: 100%;
    padding: 30px 0;
    background-color: #FFF;
    color: ${props => props.color || "#EB9B00"};
    font-size: 36px;
    text-align: center;
    margin: 0;

export default TitleStyled;

Componente LastLaunchings

import { books } from "../SearchBarComponent/mockedSearchData"
import styled from "styled-components"
import TitleStyled from "../Title"

const LastLaunchingsStyled = styled.section`
    background-color: #EBECEE;
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
`

const NewBooksStyled = styled.div`
    margin-top: 30px;
    display: flex;
    width: 100%;
    justify-content: center;
    cursor: pointer;
`

function LastLaunchings() {
    return (
        <LastLaunchingsStyled>
            <TitleStyled>IOOI</TitleStyled>
            <TitleStyled color="#000">IOOI</TitleStyled>
            <NewBooksStyled>
                {books.map(book => (
                    <img key={book.id} src={book.src} alt={book.title} />
                ))}
            </NewBooksStyled>
        </LastLaunchingsStyled>
    )
}

export default LastLaunchings;

Mudanças feitas: Remoção das aspas: As aspas em torno do texto "IOOI" foram removidas para que o valor real seja passado para o componente TitleStyled. Adição de key: É uma boa prática adicionar a propriedade key quando você mapeia sobre uma lista, especialmente ao renderizar listas de elementos, como imagens. Isso ajuda o React a identificar quais itens mudaram, foram adicionados ou removidos.

Agora, ao renderizar TitleStyled, o valor da cor deve ser aplicado corretamente. O primeiro título deve ter a cor padrão (#EB9B00) e o segundo deve ser preto (#000).

Era isso mesmo, muito obrigado pela ajuda!

que bom Danilo, seria interessante vc marcar a minha resposta como a solução, pois assim se alguém tiver a mesma dúvida que a sua, poderá resolver sem precisar um tópico!