Reactjs 对react项目的全局媒体查询

我试图在带有全局断点的SCS上生成样式的一般结构，作为react项目上的媒体查询，可以重用结构来跟踪我们声明为全局的媒体查询。 我对这个有点迷茫，有什么想法吗

当我指的是全局时，我们可以在项目的根定义断点，并且可以使用组件上的任何引用

---

提前感谢。

我想到了三种方法：

您可以创建一个

variables.scss

文件，您可以在其中写入断点的值：

$sm:576px；
$md:768px；
$lg:992px；
$xl:1200像素

并在SCS中使用以下变量：

@media only screen and (min-width: $sm) {
    .container {
        .max-width: 450px;
    }
}
@media only screen and (min-width: $md) {
    .container {
        .max-width: 650px;
    }
}
@media only screen and (min-width: $lg) {
    .container {
        .max-width: 900px;
    }
}
@media only screen and (min-width: $xl) {
    .container {
        .max-width: 1000px;
    }
}

或者，您可以在
mixins.scss
文件中使用上述变量来创建一些媒体查询mixin：

@mixin小型{
@仅介质屏幕和（最小宽度：$sm）{
@内容；
}
}

然后，在您的主要scss代码中使用这些混音：

.container {
    @include small {
        max-width: 450px;
    }
    ...
}

或者，如果这些媒体查询的使用情况有限（例如隐藏和显示元素），您可以定义包含所有变体的其他混合：

$displays:无内联块块表单元格表行flex内联flex；
$size:(
sm:$sm，
md:$md，
lg:$lg，
lg:$xl
);
@$中的每个$显示将显示：
@每个$size键$size in$size{
.display-#{size key}-#{display}{
显示：$display！重要；
}
}
}

关于导入文件的注意事项：我个人会将我的所有助手SCS（变量、混合等）导入到项目根目录中名为
style/index.scss
的文件中，其中包含我想要定义的规范化规则和其他全局规则，然后将此文件导入我的其他SCS文件中：

// styles/index.scss
@import './variables.scss';
@import './mixins.scss';
...

// container.scss
@import './styles/index.scss';

这个问题需要更多的细节。当你说“全局”时，你的意思是说你只想在应用程序的顶层包含样式，而不是逐个组件声明样式吗？我将在我的所有组件上引用这个variables.scs？或者该文件将自动在每个组件上引用？很好，这是最后一个问题。您知道导入是针对每个组件进行复制，还是在我们进入部署后减少导入？当然知道！在每个要使用这些值的文件中导入
index.scss
文件，但是当它传输时，所有内容只导入一次！此外，css输出中没有任何变量定义！附言：如能投票支持，我们将不胜感激。：）