将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

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

你可以改为给p标签一个uppercase className，然后用p类将这些样式应用到uppercase标签。

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;
    }
  }
`