Передать опору вложенному элементу в стилизованном компоненте

Question

Я хотел бы передать реквизит вложенному стилю для элемента абзаца, но, похоже, я не могу поставить реквизит непосредственно на элемент. Как мне этого добиться? Я только хочу применить преобразование в верхнем регистре только к одному из элементов 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

Размещение окончательного результата для потомков на основе ответа Толле ...

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

Answer 2

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