Η κλάση Component αλλαγή χρώματος κειμένου με βάση το υπόβαθρο στο React / Gatsby / Styled-εξαρτήματα

ψήφοι
0

Hey λαοί ελπίζω ότι μπορώ να πάρω κάποια βοήθεια.

Έχω μια κλάση Component, το χρώμα του κειμένου παίρνω από ThemeProvider από το θεματικό φάκελο που έχω έχει εκχωρηθεί σε μπλε ...

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

Το σώμα έχει μπλε φόντο.

Έχω 3 τμήματα

  • Στοιχείο με ειδικό λευκό φόντο
       <Heading
            title=First Section Is OK
            subtitle=Here is white background on the div from that section and blue text from the component
          />
  • Στοιχείο με ΟΧΙ φόντο ανατεθεί
       <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
          />
  • Και το ίδιο πρώτο στοιχείο με λευκό φόντο ανατεθεί.
       <Heading
            title=Third Section Is OK
            subtitle=Here is white background on the div from that section and blue text from the component
          />

Είμαι χρησιμοποιώντας την κλάση Component σε όλα τα 3 τμήματα, αλλά στο μεσαίο τμήμα δεν μπορώ να δω το χρώμα αιτία είναι μπλε κείμενο και μπλε φόντο ...

Πώς να προσεγγίσουμε αυτό το πρόβλημα να έχει κάπως δυναμικά το χρώμα του κειμένου με βάση το ιστορικό ???

κυριολεκτικά Έχω μια κλανιά του εγκεφάλου και δεν μπορώ να το πράγμα ... Ελπίδα μπορείτε να με καθοδηγήσει ή να μου δώσει μια καλύτερη προσέγγιση.

Δημοσιεύθηκε 14/02/2020 στις 00:05
πηγή χρήστη
Σε άλλες γλώσσες...                            


1 απαντήσεις

ψήφοι
1

Θα μπορούσατε να δοκιμάσετε να προσθέσετε ένα ακίνητο για να καθορίσει το στυλ.

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

Στη συνέχεια, το συστατικό Ονομασία σας:

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


const Heading = ({props}) => {
     render() {
          return (
               <Bg FontColor={ props.textColor } BkgColor={ props.bgColor }>
                    ...
               </Bg>
          )
     }
}
Απαντήθηκε 14/02/2020 στις 00:19
πηγή χρήστη

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