代码之家 › 专栏 › 技术社区 › James

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

styled-components reactjs css

James · 技术社区 · 7 年前

我有一个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的角度我可以理解为什么)…我试图找到与样式化组件相关的示例,但没有成功。

2 回复 | 直到 7 年前

Tomasz Mularczyk 7 年前

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

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

你应该使用 min-width

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

此外,相关 article .

James 7 年前

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

推荐文章