Add styling to child element using Styled Components?

Question

Say I want to create a styled component called <NoPrint /> that adds the following CSS to any element passed as child:

@media print
{    
    display: none !important;
}

How can I do that?

I want to be able to write a styled component like this:

<NoPrint><p>Some paragraph</p></NoPrint>
<NoPrint><Some>Some React component</Some></NoPrint>

I know that I can write:

const NoPrint = styled.div`
    @media print
    {    
        display: none !important;
    }
`

render(
  <NoPrint>
    <Something />
  </NoPrint>
)

But this component creates a wrapping div, which I do not want.

Answer 1

This is because you have to pass in the component you want to style, IE:

Style a component without wrapper

const NoPrint = styled(myComponent)`
    @media print
    {    
        display: none !important;
    }
`

this will apply a custom style directly to an element without a wrapper.

Polymorphic prop

Another way is to use a "as" polymorphic prop

const Component = styled.div`
@media print
      {    
          display: none !important;
      }
`;

render(
  <Component
    as="button"
    onClick={() => alert('It works!')}
  >
    Hello World!
  </Component>
)