Компонент заголовка меняет цвет текста на основе фона в React / Gatsby / Styled-компоненты

Question

Привет, ребята, надеюсь, я смогу получить некоторую помощь.

У меня есть компонент заголовка, цвет текста, который я беру из 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"
          />

I Я использую компонент «Заголовок» во всех трех разделах, но в средней части я не вижу, что причина в цвете - синий текст и синий фон ...

Как решить эту проблему, чтобы иметь своего рода динамический c текст цвет в зависимости от фона ???

буквально у меня пердит мозг, и я ничего не могу ... Надеюсь, вы можете направить меня или дать мне лучший подход.

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