Reactjs 标题组件根据React/Gatsby/Styled components中的背景更改文本颜色

嘿，伙计们，我希望能得到一些帮助

我有一个标题组件，我从文件夹主题的Provider中获取的文本颜色被指定为蓝色

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

const Title=styled.h1`
字体大小：2.5rem；
文本转换：大写；
显示：块；
字号：700；
字母间距：0.1rem；
边缘底部：1rem；
线高：1.15；
color:${props=>props.theme.colors.main}；
`
const SubTitle=styled.h2`
字号：2rem；
保证金：0；
颜色：${props=>props.theme.colors.text}；
字体大小：400；
`
常量标题=（{title，subtitle}）=>{
返回(
{title}
{副标题}
)
}

主体具有蓝色背景

我有三个部分

• 具有指定白色背景的组件

• 未指定背景的组件

• 和指定了白色背景的相同第一个组件

我在所有3个部分中使用标题组件，但在中间部分我看不到颜色，原因是蓝色文本和蓝色背景

如何解决这个问题，使文本在背景的基础上有一种动态的颜色

---

从字面上说，我有一个大脑放屁，我不能做任何事情。。。希望你能指导我或给我一个更好的方法

您可以尝试添加属性以确定样式

`

然后在标题组件中：

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


const Heading = ({props}) => {
     render() {
          return (
               <Bg FontColor={ props.textColor } BkgColor={ props.bgColor }>
                    ...
               </Bg>
          )
     }
}

const Bg=styled.div`
背景色：{props.BkgColor}
颜色：{props.FontColor}
...
`
常量标题=（{props}）=>{
render（）{
返回(
...
)
}
}

       <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"
          />

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


const Heading = ({props}) => {
     render() {
          return (
               <Bg FontColor={ props.textColor } BkgColor={ props.bgColor }>
                    ...
               </Bg>
          )
     }
}