使用样式化组件隐藏小设备上的按钮

这应该可以正常工作,除非:

我正在做一个媒体查询…隐藏按钮,如果 屏幕大于700px:

你应该使用 min-width

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

此外,相关 article .

所以我确认了我的媒体查询是正确的。它不起作用的原因是 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;
  }
`;