css - 我可以在 React 中使用样式化组件实现以下条件媒体查询吗？

Question

我正在尝试将 wrapper 类添加到 React 中的样式化组件。有什么我可以实现它以便生成如下 CSS 吗？

.test-class {
    color: red;
    font-size: 40px;
}

@media (max-width: 600px) {
    .wrapper .test-class { 
       color: blue;
       font-size: 30px;
    }
}

像这样

const Content = styled.div`
    color: red;
    font-size: 40px;

    @media (max-width: 600px) {
       .wrapper {
            color: blue;
            font-size: 30px;
       }
    } 
`;

谢谢!

Answer 1

这里有一个示例模板可以做到这一点

const Content = styled.div`
  background: papayawhip;
  height: 3em;
  width: 3em;

  @media (max-width: 700px) {
    background: palevioletred;
  }
`;

render(
  <Content />
);

有关更多信息，请参阅 - https://www.styled-components.com/docs/advanced