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).