我可以使用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

Answer 2

您可以创建媒体查询文件或/并添加以下代码

const size = {
  tablet: '600px',
}
const device = {
  yourSize: `(max-width: ${size.tablet})`,
}

并通过使用选择器来引用包装器下的测试类来更改样式组件类，如下所示

const TestClass = styled.div`
  color: red;
  font-size: 40px;
`;
const Wrapper = styled.div`
  @media ${device.yourSize}  {  
    ${TestClass} {
      color: blue;
      font-size: 30px;
    }
  }
`;

 render(
  <Wrapper>
    <TestClass>Text</TestClass>
  </Wrapper>
 );