将 prop 传递给样式化组件中的嵌套元素

Question

我想将 prop 传递给段落元素的嵌套样式，但看起来我无法将 prop 直接放在元素上。我如何实现这一目标？我只想将大写转换应用于 p 元素之一...

const MailingListWrapper = styled.div`
  display: flex;
  & > p {
    text-transform: ${props => props.uppercase || 'none'};
  }
`

function JoinUs() {
  return (
    <MailingListWrapper>
      <p uppercase="uppercase">Join our mailing list!</p>
      <p>Never miss an update</p>
    </MailingListWrapper>
  )
}

Answer 1

您在创建MailingListWrapper组件时使用的模板字符串中可以访问的props是您使用它时提供给MailingListWrapper的道具。

您可以改为给 p 标签一个 uppercase className，然后将样式应用到带有 uppercase [=23= 的 p 标签].

const MailingListWrapper = styled.div`
  display: flex;
  & > p.uppercase {
    text-transform: uppercase;
  }
`;

function JoinUs() {
  return (
    <MailingListWrapper>
      <p className="uppercase">Join our mailing list!</p>
      <p>Never miss an update</p>
    </MailingListWrapper>
  );
}

Answer 2

根据 Tholle 的回答将最终结果放在这里供后人使用...

const MailingListWrapper = styled.div`
  display: flex;
  & > p {
    color: gold;
    &.uppercase {
      text-transform: uppercase;
    }
  }
`

将 prop 传递给样式化组件中的嵌套元素

Pass prop to nested element in styled component

css

reactjs

styled-components