Überschrift Komponentenwechsel Textfarbe auf dem Hintergrund in React / Gatsby / Styled-Komponenten

stimmen
0

Hey Leute ich hoffe, ich kann etwas Hilfe zu bekommen.

Ich habe eine Überschrift Komponente, die Textfarbe I von ThemeProvider aus dem Ordner Thema nehme, dass ich auf blau zugewiesen ...

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

Der Körper hat blauen Hintergrund.

Ich habe 3 Abschnitte

  • Komponente mit Assigned weißen Hintergrund
       <Heading
            title=First Section Is OK
            subtitle=Here is white background on the div from that section and blue text from the component
          />
  • Komponente mit NO Hintergrund zugewiesen
       <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
          />
  • Und die gleiche erste Komponente mit weißen Hintergrund zuzugeordnet.
       <Heading
            title=Third Section Is OK
            subtitle=Here is white background on the div from that section and blue text from the component
          />

Ich verwende die Bezeichnung Komponente in allen drei Abschnitten, aber auf dem mittleren Abschnitt kann ich sehen, nicht die Farbe Blau Ursache Text und blauer Hintergrund ist ...

Wie dieses Problem zu nähern irgendwie dynamische Textfarbe auf dem Hintergrund basierte haben ???

buchstäblich habe ich einen Furz Gehirn und ich kann nicht Sache ... Hoffnung können Sie mich leiten oder mir einen besseren Ansatz.

Veröffentlicht am 13/02/2020 um 22:05
quelle vom benutzer
In anderen Sprachen...                            


1 antworten

stimmen
1

Sie könnten versuchen, eine Eigenschaft Hinzufügen von Stil zu bestimmen.

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

Dann in Ihrer Überschrift Komponente:

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


const Heading = ({props}) => {
     render() {
          return (
               <Bg FontColor={ props.textColor } BkgColor={ props.bgColor }>
                    ...
               </Bg>
          )
     }
}
Beantwortet am 13/02/2020 um 22:19
quelle vom benutzer

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