时间戳

首页 > 解决方案 > 使用样式化组件在小型设备上隐藏按钮

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

问题描述

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

我正在尝试进行这样的媒体查询，以在屏幕大于 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 相关示例，但没有成功。

标签： cssreactjsstyled-components

解决方案

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

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

你应该使用min-width

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

另外，相关文章。

推荐阅读