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

Question

我有一个 React 应用程序，我想在 header 从小型设备上查看时隐藏某些按钮。我通过 Styled Components 对所有内容进行样式化。

我正在尝试进行这样的媒体查询，以便在屏幕大于 700 像素时隐藏按钮：

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

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

I am trying to make a media query ... to hide the button if the screen is greater than 700px:

你应该使用min-width

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

此外，相关 article。

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

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

Hide button on small devices using Styled Components

css

reactjs

styled-components