带有样式组件的顶级媒体查询？答案

【问题标题】：Top level media queries with styled-components?带有样式组件的顶级媒体查询？
【发布时间】：2021-05-31 12:35:12
【问题描述】：

我目前正在从普通的 scss/sass 迁移到我的 react 站点中的样式化组件！

但是，我想知道是否有任何方法可以添加顶级媒体查询（如果这是描述它们的正确方法）。这就是我要说的：

/* Large screens */
@media only screen and (min-width: 600px) {
  .navbar {
    top: 0;
    width: 5rem;
    height: 100vh;

    &:hover {
      width: 16rem;

      .link-text {
        display: inline;
      }

      .logo svg {
        margin-left: 11rem;
      }

      .logo-text {
        left: 0px;
      }
    }
  }
}

据我所知，我需要在每个 styled-component 组件中添加媒体查询以及我想要更改的样式。不过，我觉得这样的查询会更有条理。

有没有办法使用 styled-components 获得这样的媒体查询？任何帮助将不胜感激！

【问题讨论】：

标签： javascript css reactjs styled-components

【解决方案1】：

我通常为媒体创建一个全局样式。我在那里放置了我的顶级媒体查询。

import { createGlobalStyle } from "styled-components";

export default createGlobalStyle`
    * {
        margin: 0;
        padding: 0;
        outline: 0;
        box-sizing: border-box;
    }

  @media(max-width: 800px) {
    flex-direction: column;
    position: relative;
  }

`;

【讨论】：