React的styled-components

Posted 2023-05-02

参考技术A

styled-components 是react的一个第三方库，一种css私有化的方式。用来实现 CSS in JS 的方式之一。

在多人协作中，css必定会出现命名冲突，与vue的scoped解决方案不同，react用styled-components的给类名加了随机字符的方式实现了css的私有化。

缺点：麻烦，增加学习成本

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

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

【英文标题】：Heading Component change text color based on the background in 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 个部分都使用标题组件，但在中间部分我看不到颜色原因是蓝色文本和蓝色背景...

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

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

【参考方案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>
          )