Rubrique couleur du texte de modification composants à base de l'arrière-plan dans React / Gatsby / Styled-composants

voix
0

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.

Créé 14/02/2020 à 00:05
source utilisateur
Dans d'autres langues...                            


1 réponses

voix
1

Vous pouvez essayer d'ajouter une propriété pour déterminer le style.

<Heading title="" subtitle="" textColor="blue" bgColor="green" /> `

Ensuite, dans votre composant Rubrique:

const Bg = styled.div`
     background-color: {props.BkgColor}
     color: {props.FontColor}
     ...
`


const Heading = ({props}) => {
     render() {
          return (
               <Bg FontColor={ props.textColor } BkgColor={ props.bgColor }>
                    ...
               </Bg>
          )
     }
}
Créé 14/02/2020 à 00:19
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more