Rubrica Componente cambiare colore del testo in base al background in Reagire / Gatsby / Styled componenti

voti
0

Hey ragazzi Spero di poter avere un aiuto.

Ho un componente intestazione, il colore del testo che sto prendendo da ThemeProvider dal tema cartella che ho assegnato al blu ...

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

Il corpo ha sfondo blu.

Ho 3 sezioni

  • Componente con sfondo bianco Assegnato
       <Heading
            title=First Section Is OK
            subtitle=Here is white background on the div from that section and blue text from the component
          />
  • Componente con NO sfondo assegnato
       <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 il primo componente Stessa cosa con sfondo bianco assegnato.
       <Heading
            title=Third Section Is OK
            subtitle=Here is white background on the div from that section and blue text from the component
          />

Sto usando il componente Rubrica in tutte le 3 sezioni, ma la sezione centrale non riesco a vedere la causa del colore del testo è blu e blu ...

Come affrontare questo problema di avere il colore del testo un po dinamica basata sullo sfondo ???

letteralmente Ho un peto cervello e non posso cosa ... spero che tu possa guidarmi o darmi un approccio migliore.

È pubblicato 14/02/2020 alle 00:05
fonte dall'utente
In altre lingue...                            


1 risposte

voti
1

Si potrebbe provare ad aggiungere una proprietà per determinare lo stile.

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

Poi nel componente Intestazione:

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


const Heading = ({props}) => {
     render() {
          return (
               <Bg FontColor={ props.textColor } BkgColor={ props.bgColor }>
                    ...
               </Bg>
          )
     }
}
Risposto il 14/02/2020 a 00:19
fonte dall'utente

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