Styled Components - 通过 props 传递的内容（内容）

【问题标题】：Styled Components - content passed through props (content)Styled Components - 通过 props 传递的内容（内容）
【发布时间】：2020-07-09 09:12:26
【问题描述】：

我正在尝试根据 props 值切换 div（样式组件）内的文本。这个想法很简单：状态改变，它的值转到样式组件的道具，然后根据它是什么，内容进行调整。不工作的是之前/之后的内容。知道为什么吗？

样式组件：

export const Info = styled.div`
  padding: 5px;
  margin-top: 15px;
  &::after {
 content: ${props => props.content === "intro" && "hello"};
  }
`

const CheckNumber = () => {

  const [msg, setMsg] = useState("intro")

  return (

        <Info content={msg}/>
  )
}

export default CheckNumber

【问题讨论】：

标签： reactjs styled-components

【解决方案1】：

您当前的代码生成样式

content: hello

那是无效的 CSS。您需要额外的引号（JS 级别的一对和 CSS 的嵌套引号）：

  &::after {
     content: ${props => props.content === "intro" && "'hello'"};
  }

PS 发现真的是通过复制content 意外发现的：

  &::after {
     content: "aaaa";
     content: ${props => props.content === "intro" && "hello"};
  }

因为浏览器没有创建 "::after" prseudoelement 而content 无效 - 所以我们无法检查实际生成的样式。

【讨论】：