प्रतिक्रिया / Gatsby / स्टाइल-घटकों में पृष्ठभूमि के आधार पर घटक परिवर्तन पाठ रंग शीर्षक

वोट
0

अरे लोग मुझे आशा है कि मैं कुछ मदद मिल सकती है।

मैं एक शीर्षक घटक, पाठ रंग मैं फ़ोल्डर विषय है कि मैं नीला को सौंपा गया है से 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
          />

मैं सभी 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