@media 在一个非常奇怪的 React 实现中使用 .tsx 和 .ts 文件进行查询

Question

在过去两年左右的时间里，我一直在使用 React，并从 2000 年初开始使用@media 查询。我刚刚加入了一个新项目，他们以一种相当新颖的方式构建 React 组件，至少根据我的经验。

我将在下面放置一个片段来说明我的意思，但基本上他们不像我通常那样使用 .js 和 .css 文件，而是使用 .tsx 和 .ts 文件。他们在 .ts 文件中创建一个组件并立即应用样式。它看起来像这样：

//.ts文件

export const Container = styled.div`
  .second-chart {
    margin-top: 44px;
  }
`;

//.tsx 文件

import {Container} from "./styles";
...
<Container>
   <div className="second-chart">
   ...
   </div>
</Container>

我完全明白它是如何工作的，而且使用起来似乎很简单。然而，我担心如何为这种类型的实现编写@media 查询？我什至不知道怎么称呼它，所以我也许可以在线搜索建议。

有谁知道可以用于此类实施的术语吗？或者更好的是，有人可以让我知道如何为它编写 @media 查询吗？我在想，如果我知道如何将 class 添加到 .ts 文件中的 'styled.div' 部分，我总是可以将我的 @media 查询添加到单独的 .css 文件。

如有任何建议，我们将不胜感激。

Answer 1

多亏了 Abin Thaha 的评论，我才能找到问题的答案。您只需将它作为子项添加到声明中，如下所示：

export const Container = styled.div`
  display:flex;
  .second-chart {
    margin-top: 44px;
  }
  @media only screen and (max-width: 1200px) {
    flex-direction: column;
    justify-content: center;
    .second-chart {
        margin-top: 35px;
    }
  }
`;

Answer 2

看起来该项目正在使用 Styled Components。正如@phunder 所指出的，您可以将所有正常的 css 包含在样式元素中，其中包括您的媒体查询，如下所示：

export const Container = styled.div`
  font-size: 16px

  @media only screen and (max-width: 600px) {
    font-size: 12px
  }
`;

@media 在一个非常奇怪的 React 实现中使用 .tsx 和 .ts 文件进行查询

@media queries in a very odd React implementation using .tsx and .ts files

css

media-queries

reactjs