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

Posted 2023-03-06

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

【英文标题】：@media queries in a very odd React implementation using .tsx and .ts files

【发布时间】：2021-08-30 07:27:45

【问题描述】：

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

我将在下面放置一个 sn-p 来说明我的意思，但基本上它们不像我通常那样使用 .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 查询吗？我在想，如果我知道如何将一个类添加到 .ts 文件中的“styled.div”部分，我总是可以将我的@media 查询添加到一个单独的 .css 文件中。

任何建议将不胜感激。

【问题讨论】：

为什么不能在 React 中使用普通的 scss 文件？顺便问一下，你在寻找 css-in-js 这个词吗？

@AbinThaha 这是我正在使用的现有系统。我需要在项目中遵循与以前的开发人员相同的方法，所以我不能重做整个系统以使其无法像这样工作。谢谢这个词，我会调查一下，看看它是否能给我任何线索。

@AbinThaha，谢谢，“css-in-js”这个词确实是正确的词，我相信我已经找到了解决方案。一分钟后会在这里发布。

【参考方案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;
    
  
`;

【参考方案2】：

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

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

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