时间戳

首页 > 解决方案 > Styled Components - 通过 props 传递的内容（内容）

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

问题描述

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

样式组件：

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

JS

const CheckNumber = () => {

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

  return (

        <Info content={msg}/>
  )
}

export default CheckNumber

标签： reactjsstyled-components

解决方案

您当前的代码生成样式

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无效 - 所以我们无法检查实际生成的样式。

推荐阅读