Global media queries on a react project - reactjs

Question

I'm trying to generate a general structure of styles on scss with global breakpoints as media queries on a react project, It is possible to reuse an structure to follow media queries that we declare as global.
I'm a little bit lost on this one, any ideas?
When I mean global is that we can define the breakpoints at the root of the project and we can use any reference on the components.
Thanks in advance.

Answer 1

There are three ways that come to mind:
You can create a variables.scss file in which you can write the value of your breakpoints:
$sm: 576px;
$md: 768px;
$lg: 992px;
$xl: 1200px;
And the use the following variables in your scss:
#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;
}
}
Or you can the mentioned variables in your mixins.scss file to create some media query mixins:
#mixin small {
#media only screen and (min-width: $sm) {
#content;
}
}
And then, use these mixins in your main scss codes:
.container {
#include small {
max-width: 450px;
}
...
}
Or if the use cases of these media queries are limited (e.g. hiding and showing elements), you can define other mixins that include all the variations:
$displays: none inline inline-block block table table-cell table-row flex inline-flex;
$sizes: (
sm: $sm,
md: $md,
lg: $lg,
lg: $xl
);
#each $display in $displays:
#each $size-key $size in $sizes {
.display-#{size-key}-#{display} {
display: $display !important;
}
}
}
A note on importing files: I personally would import all my helper scss (variables, mixins, etc.) in a file called styles/index.scss in the root of my project among with normalizing and other global rules that I want to define, and then import this file in my other scss files:
// styles/index.scss
#import './variables.scss';
#import './mixins.scss';
...
// container.scss
#import './styles/index.scss';