Overskriften Komponent endre tekstfarge basert på bakgrunn i å reagere / Gatsby / stilformatkomponenter

stemmer
0

Hei folkens Jeg håper jeg kan få litt hjelp.

Jeg har en Overskrift Component, tekstfarge jeg tar fra ThemeProvider fra mappen tema som jeg har er tildelt blå ...

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

Den kroppen har blå bakgrunn.

Jeg har 3 seksjoner

  • Komponent med Assigned hvit bakgrunn
       <Heading
            title=First Section Is OK
            subtitle=Here is white background on the div from that section and blue text from the component
          />
  • Komponent med ingen bakgrunn er tilordnet
       <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
          />
  • Og det samme første komponent med hvit bakgrunn tildelt.
       <Heading
            title=Third Section Is OK
            subtitle=Here is white background on the div from that section and blue text from the component
          />

Jeg bruker head Component i alle 3 deler, men på den midtre delen kan jeg ikke se fargen årsaken er blå tekst og blå bakgrunn ...

Hvordan å nærme seg dette problemet å ha ganske dynamisk tekstfarge basert på bakgrunnen ???

bokstavelig talt jeg har en hjerne fjert, og jeg kan ikke noe ... Håper du kan veilede meg eller gi meg en bedre tilnærming.

Publisert på 14/02/2020 klokken 00:05
kilden bruker
På andre språk...                            


1 svar

stemmer
1

Du kan prøve å legge en eiendom til bestemme stil.

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

Så i Overskrift komponent:

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


const Heading = ({props}) => {
     render() {
          return (
               <Bg FontColor={ props.textColor } BkgColor={ props.bgColor }>
                    ...
               </Bg>
          )
     }
}
Svarte 14/02/2020 kl. 00:19
kilden bruker

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