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

【问题标题】：Hide button on small devices using Styled Components使用样式化组件在小型设备上隐藏按钮
【发布时间】：2018-11-06 02:55:27
【问题描述】：

我有一个 React 应用程序，我想在从小型设备查看时从标题中隐藏某些按钮。我通过 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 相关示例但没有成功。

【问题讨论】：

标签： css reactjs styled-components

【解决方案1】：

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

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

你应该使用min-width

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

还有，相关article。

【讨论】：

【解决方案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;
  }
`;

【讨论】：