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

【问题标题】：Add styling to child element using Styled Components?使用样式化组件向子元素添加样式？
【发布时间】：2019-05-01 23:13:51
【问题描述】：

假设我想创建一个名为 <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。

【问题讨论】：

标签： reactjs styled-components

【解决方案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>
)

【讨论】：

【解决方案2】：

我能看到在没有 div 的情况下计算某些东西的唯一方法是将媒体查询放在带有类名的 css 样式表中，然后将该类名传递给您的元素。

类似

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

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

要制作没有 div 的元素，可以使用 React.Fragment，但你不能设置它们的样式... 不知道有没有

【讨论】：

【解决方案3】：

实际上，您无法逃脱包装 div。您必须将其包装在某个地方，或者创建一个静态样式的组件，该组件可以通过引用它来包含在其他样式的组件中。

示例

你可以像样式帮助文件一样把它放进去

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

然后您可以将其包含在其他样式的组件中。但是如果没有像 span 或 div 这样的关联元素，它就不能被其他组件包裹起来。

【讨论】：