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

以下是执行此操作的示例模板

＆＃13;

const Content = styled.div`
  background: papayawhip;
  height: 3em;
  width: 3em;

  @media (max-width: 700px) {
    background: palevioletred;
  }
`;

render(
  <Content />
);

＆＃13;

有关详细信息，请参阅 - https://stackoverflow.com/a/34886586

Answer 2

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

通过使用选择器来改变你的样式组件类，以便像这样在包装器下引用你的测试类

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

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

2 个答案: