Эй, ребята, я надеюсь, что я могу получить некоторую помощь.
У меня есть заглавия компонент, цвет текста я беру из ThemeProvider от темы папки, что я назначен на синий ...
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>
)
}
Тело имеет синий фон.
У меня есть 3 секции
- Компонент с Assigned белым фоном
<Heading
title=First Section Is OK
subtitle=Here is white background on the div from that section and blue text from the component
/>
- Компонент с фоном NO назначен
<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
/>
- И тот же самый первый компонент с белым фоном назначен.
<Heading
title=Third Section Is OK
subtitle=Here is white background on the div from that section and blue text from the component
/>
Я использую Heading компонент во всех 3-х секций, а на средней части, я не могу видеть цвет причина является синим текстом и синий фон ...
Как подойти к этой проблеме, чтобы иметь своего рода динамический цвет текста, основанный на фоне ???
буквально у меня есть пердеть мозг, и я не могу, что ... Надеюсь, что вы можете направлять мне или дать мне лучший подход.