使用Styled Components在小型设备上隐藏按钮

Question

我有一个React应用程序，我想从小型设备查看时隐藏标题中的某些按钮。我通过样式组件设计样式。

我正在尝试制作这样的媒体查询，如果屏幕大于700px则隐藏按钮：

export const BigScreenButton = styled(Button)`
  color: white !important;
  border: 2px solid white !important;
  border-radius: 3px !important;
  padding: 0 10px;
  margin-left: 10px !important;

  @media screen and (max-width: 700px) {
    display: none;
  }
`;

然而这不起作用（我可以从CSS的角度理解为什么）...我试图找到Styled Component相关的例子但是没有成功。

Answer 1

这应该可以正常工作，除了：

  

我正在尝试进行媒体查询...如果隐藏按钮   屏幕大于700px：

您应该使用min-width

@media screen and (min-width: 700px) {
  display: none;
}

此外，相关。

Answer 2

所以我确认我的媒体查询实际上是正确的。它不起作用的原因是因为styled-components只是忽略它。我重写了默认行为，如下所示：

export const BigScreenButton = styled(Button)`
  color: white !important;
  border: 2px solid white !important;
  border-radius: 3px !important;
  padding: 0 10px;
  margin-left: 10px !important;

  @media screen and (max-width: 700px) {
    display: none !important;
  }
`;