Hola gente espero poder conseguir un poco de ayuda.
Tengo un componente de la rúbrica, el color del texto estoy tomando de ThemeProvider del tema de la carpeta que tengo es asignado 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>
)
}
El cuerpo tiene un fondo azul.
Tengo 3 secciones
- Componente con fondo blanco Asignado
<Heading
title=First Section Is OK
subtitle=Here is white background on the div from that section and blue text from the component
/>
- Un componente sin fondo asignado
<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
/>
- Y el primer componente Lo mismo con el fondo blanco asignado.
<Heading
title=Third Section Is OK
subtitle=Here is white background on the div from that section and blue text from the component
/>
Estoy utilizando el Componente La partida en todas las secciones 3, pero en la sección media no puedo ver la causa del color de texto es azul y fondo azul ...
La forma de abordar este problema de tener un poco de color de texto dinámico basado en el fondo ???
literalmente, tengo un pedo cerebro y no puedo cosa ... Esperamos que puedan guiarme o me da un mejor enfoque.