Titlu Componentă text color schimbare bazată pe fundal în reacționăm / Gatsby /-componente stilizate

voturi
0

Hei, oameni buni Sper că pot obține ajutor.

Am o componentă compas, culoarea textului Sunt luați de la ThemeProvider de tema dosarul pe care l-am este atribuit albastru ...

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

Organismul are fundal albastru.

Am 3 secțiuni

  • Componenta cu fundal alb alocate
       <Heading
            title=First Section Is OK
            subtitle=Here is white background on the div from that section and blue text from the component
          />
  • Componenta cu fundal NO alocate
       <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
          />
  • Și primul component La fel cu fundal alb alocate.
       <Heading
            title=Third Section Is OK
            subtitle=Here is white background on the div from that section and blue text from the component
          />

Sunt folosind Componenta Rubrica din toate cele 3 secțiuni, dar pe partea de mijloc nu pot vedea cauza culoare este albastru text și fundal albastru ...

Cum de a aborda această problemă de a avea cam dinamic text color bazat pe fundal ???

literalmente Am o băși creier și nu pot lucru ... Sper că mă poți ghida sau da-mi o abordare mai bună.

Întrebat 13/02/2020 la 22:05
sursa de către utilizator
În alte limbi...                            


1 răspunsuri

voturi
1

Ai putea încerca să adăugați o proprietate pentru a determina stilul.

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

Apoi, în componenta dumneavoastră Titlu:

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


const Heading = ({props}) => {
     render() {
          return (
               <Bg FontColor={ props.textColor } BkgColor={ props.bgColor }>
                    ...
               </Bg>
          )
     }
}
Publicat 13/02/2020 la 22:19
sursa de către utilizator

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