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

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

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

多态属性

另一种方法是使用 "as" 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.

这样的关联元素，它就不能环绕其他组件。

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

Add styling to child element using Styled Components?

reactjs

styled-components

为没有包装器的组件设置样式

多态属性

例子