How to group media query for many component styled in react - css

Question

I have not found any solution for avoid repeat media query for all styled components. I have a grid layout and i want to rearrange when display screen changes
It's very ugly to same media query repeated for any styled components
import React from "react";
import styled from "styled-components";
const Container = styled.div`
height: 100%;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 60% 40%;
#media screen and (max-width: 768px) {
grid-template-columns: 1fr;
grid-template-rows: 30% 20% 30% 30%;
}
`
const MainContainer = styled.div`
background-color: salmon;
grid-column: span 8;
#media screen and (max-width: 768px) {
grid-column: span 12;
}
`
const ListContainer = styled.div`
background-color: violet;
grid-column: span 4;
grid-row: span 2;
#media screen and (max-width: 768px) {
grid-column: span 12;
grid-row: 2;
}
`
const Item2 = styled.div`
background-color: fuchsia;
grid-column: span 3;
#media screen and (max-width: 768px) {
grid-column: span 12;
grid-row: 3;
}
`
const Item3 = styled.div`
background-color: lawngreen;
grid-column: span 5;
#media screen and (max-width: 768px) {
grid-column: span 12;
grid-row: 4;
}
`
const Home = () => {
return(
<Container>
<MainContainer>Main</MainContainer>
<ListContainer>List</ListContainer>
<Item2>Today</Item2>
<Item3>Forecast</Item3>
</Container>
)
}
export default Home
I want to use once
#media screen and (max-width: 768px) {
MainContainer {
/*some changes style*/
}
Item2{
/*some other changes style*/
}
/* ....and so on */
}
how can i do using styled components?
I tryed to use for each styled component same media query but i want to avoid repeated code
****Edit
i've solved this issue with #Pius Kariuki inspiration
const MainContainer = styled.div`
background-color: salmon;
grid-column: span 8;
`
const ListContainer = styled.div`
background-color: violet;
grid-column: span 4;
grid-row: span 2;
`
const Item2 = styled.div`
background-color: fuchsia;
grid-column: span 3;
`
const Item3 = styled.div`
background-color: lawngreen;
grid-column: span 5;
`
const Container = styled.div`
height: 100%;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 60% 40%;
#media screen and (max-width: 768px) {
grid-template-columns: 1fr;
grid-template-rows: 30% 20% 30% 30%;
${Item3} {
grid-column: span 12;
grid-row: 4;
}
${Item2} {
grid-column: span 12;
grid-row: 3;
}
${ListContainer} {
grid-column: span 12;
grid-row: 2;
}
${MainContainer} {
grid-column: span 12;
}
}
`
It's important to put Container style at the end after each child are already declared

Answer 1

One way to avoid repeating the media query in every styled component is by using the CSS #media rule and defining the changes for each component inside it. Here's an example:
import React from "react";
import styled from "styled-components";
const Container = styled.div`
height: 100%;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 60% 40%;
/* Media Query */
#media screen and (max-width: 768px) {
grid-template-columns: 1fr;
grid-template-rows: 30% 20% 30% 30%;
}
`
const MainContainer = styled.div`
background-color: salmon;
grid-column: span 8;
`
const ListContainer = styled.div`
background-color: violet;
grid-column: span 4;
grid-row: span 2;
`
const Item2 = styled.div`
background-color: fuchsia;
grid-column: span 3;
`
const Item3 = styled.div`
background-color: lawngreen;
grid-column: span 5;
`
/* Media Query for all components */
#media screen and (max-width: 768px) {
${MainContainer} {
/* changes for MainContainer */
}
${Item2} {
/* changes for Item2 */
}
${Item3} {
/* changes for Item3 */
}
}
In the example above, the #media rule is defined outside of the styled-components. Then, the selector for each styled component is added to the #media rule to define the changes that should be applied to it when the screen size is less than or equal to 768px.
This way, you can avoid repeating the media query for each styled component, and define all the changes in one place.
Let me know if this helped.

Answer 2

Make a parent styled component that includes your media queries, then inherit other styled components with that component
Parent media component:
const ParentMediaComponent = styled.div`
// Global Media Queries
`
Other Child compnents inherited with parent media component:
const MainContainer = styled(ParentMediaComponent)`
// Child compnents style
`
const ListContainer = styled(ParentMediaComponent)`
// Child compnents style
`