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

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

2 个答案: