Hey les gens que j'espère que je peux obtenir de l'aide.
J'ai un en-tête des composants, la couleur du texte que je prends de ThemeProvider du thème du dossier que j'est affecté au bleu ...
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>
)
}
Le corps a fond bleu.
J'ai 3 sections
- Composant avec Assigné fond blanc
<Heading
title=First Section Is OK
subtitle=Here is white background on the div from that section and blue text from the component
/>
- Composant sans arrière-plan affectée
<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
/>
- Et le premier élément Même avec un fond blanc attribué.
<Heading
title=Third Section Is OK
subtitle=Here is white background on the div from that section and blue text from the component
/>
J'utilise le composant Rubrique dans les 3 sections, mais sur la partie centrale, je ne vois pas la cause de la couleur est bleu et texte Fond bleu ...
Comment aborder ce problème d'avoir la couleur du texte un peu dynamique basée sur l'arrière-plan ???
J'ai littéralement péter un cerveau et je ne peux pas chose ... Espoir vous pouvez me guider ou me donner une meilleure approche.