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

【问题标题】：Heading Component change text color based on the background in React / Gatsby / Styled-components标题组件根据 React / Gatsby / Styled-components 中的背景更改文本颜色
【发布时间】：2020-05-29 16:05:54
【问题描述】：

大家好，我希望我能得到一些帮助。

我有一个标题组件，我从 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 个部分都使用标题组件，但在中间部分我看不到颜色原因是蓝色文本和蓝色背景...

如何解决这个问题以根据背景获得一种动态的文本颜色???

从字面上看，我有一个大脑放屁，我不能……希望你能指导我或给我一个更好的方法。

【问题讨论】：

标签： reactjs gatsby styled-components

【解决方案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>
          )
     }
}

【讨论】：