Rubrica componente de cor mudança de texto com base no plano de fundo em Reagir / Gatsby /-denominados componentes

Question

Rubrica componente de cor mudança de texto com base no plano de fundo em Reagir / Gatsby /-denominados componentes

votos

0

Hey pessoas que eu espero que eu possa obter alguma ajuda.

Eu tenho um componente da rubrica, a cor do texto que eu estou tomando de ThemeProvider do tema pasta que tenho é atribuído 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>
  )
}

O corpo tem fundo azul.

Eu tenho 3 seções

Componente com fundo branco Assigned

       <Heading
            title=First Section Is OK
            subtitle=Here is white background on the div from that section and blue text from the component
          />

Componente sem fundo atribuído

       <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
          />

E o primeiro componente Mesmo com fundo branco atribuído.

       <Heading
            title=Third Section Is OK
            subtitle=Here is white background on the div from that section and blue text from the component
          />

Eu estou usando o componente da rubrica em todas as 3 seções, mas na parte do meio Eu não posso ver a causa da cor é um texto Azul e fundo ...

Como abordar este problema de ter a cor do texto meio dinâmico baseado no fundo ???

literalmente tenho um peido de cérebro e eu não posso coisa ... espero que possa me orientar ou me dar uma melhor abordagem.

reactjs gatsby styled-components

Publicado 13/02/2020 em 22:05
fonte usuário Ratko Gjurichanin

Em outras línguas...

1 respostas

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

Você poderia tentar adicionar uma propriedade para determinar o estilo.

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

Em seguida, em seu componente Cabeceio:

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


const Heading = ({props}) => {
     render() {
          return (
               <Bg FontColor={ props.textColor } BkgColor={ props.bgColor }>
                    ...
               </Bg>
          )
     }
}