Question

说我想创建一个名为<NoPrint />的样式化组件，该组件将以下CSS添加到作为子代传递的任何元素中：

@media print
{    
    display: none !important;
}

我该怎么做？

我希望能够编写这样的样式化组件：

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

我知道我会写：

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

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

但是此组件创建了一个包装的div，我不需要。

Answer 1

这是因为您必须传入要设置样式的组件IE：

设置没有包装的组件样式

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

这将直接将自定义样式应用于没有包装的元素。

多态道具

另一种方法是使用“为” polymorphic prop

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

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

Answer 2

我能看到的没有div的唯一方法就是将媒体查询放在具有类名的CSS样式表中，然后将该类名传递给元素。

类似

@media print
    .noPrint{    
        display: none !important;
    }

<p class="noPrint" >Some paragraph</p>

要使一个元素不包含div，可以使用React.Fragment，但是您不能设置它们的样式... 我不知道

Answer 3

实际上，您无法摆脱包装div。您将不得不将其包装在某个位置，或者创建一个静态样式的组件，该组件可以通过引用它而包含在其他样式的组件中。

示例

您可以将其放入样式帮助器文件中

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

然后可以将其包含在其他样式的组件中。但是，如果没有诸如span或div之类的关联元素，它将无法包裹在其他组件上。

使用样式化组件向子元素添加样式？

3 个答案:

设置没有包装的组件样式

多态道具

示例