score:0

Accepted answer

the props you have access to in the template string used when creating the mailinglistwrapper component are the props given to mailinglistwrapper when you use it.

you could instead give the p tag a uppercase classname and just apply the styles to p tags with the uppercase class.

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

score:0

putting the final result here for posterity based on tholle's answer...

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


Related Query

More Query from same tag