Hey pessoas que eu espero que eu possa obter alguma ajuda.
Eu tenho um componente da rubrica, a cor do texto que eu estou tomando de ThemeProvider do tema pasta que tenho é atribuído a azul ...
const Title = styled.h1`
font-size: 2.5rem;
text-transform: uppercase;
display: block;
font-weight: 700;
letter-spacing: 0.1rem;
margin-bottom: 1rem;
line-height: 1.15;
color: ${props => props.theme.colors.main}; <-BLUE COLOR->
`
const SubTitle = styled.h2`
font-size: 2rem;
margin: 0;
color: ${props => props.theme.colors.text};
font-weight: 400;
`
const Heading = ({ title, subtitle }) => {
return (
<HeadingWrapper>
<Title>{title}</Title>
<SubTitle>{subtitle}</SubTitle>
</HeadingWrapper>
)
}
O corpo tem fundo azul.
Eu tenho 3 seções
- Componente com fundo branco Assigned
<Heading
title=First Section Is OK
subtitle=Here is white background on the div from that section and blue text from the component
/>
- Componente sem fundo atribuído
<Heading
title=This section Title is NOT good cause I have the blue text color
subtitle=Here I don't use background color, I have blue color from the body
/>
- E o primeiro componente Mesmo com fundo branco atribuído.
<Heading
title=Third Section Is OK
subtitle=Here is white background on the div from that section and blue text from the component
/>
Eu estou usando o componente da rubrica em todas as 3 seções, mas na parte do meio Eu não posso ver a causa da cor é um texto Azul e fundo ...
Como abordar este problema de ter a cor do texto meio dinâmico baseado no fundo ???
literalmente tenho um peido de cérebro e eu não posso coisa ... espero que possa me orientar ou me dar uma melhor abordagem.