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

Question

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.

reactjs gatsby styled-components

Créé 13/02/2020 à 22:05
source utilisateur Ratko Gjurichanin

Dans d'autres langues...

1 réponses

emoore · Answer 1 · 2020-02-13 22:19

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>
          )
     }
}