React中使用styled-components统一管理媒体查询的方法

我希望避免在所有styled-components中重复编写媒体查询代码。当前有一个网格布局，需要在屏幕尺寸变化时重新排列布局，但每个组件里都重复相同的@media screen and (max-width: 768px)块，代码冗余严重。想要只编写一次这个媒体查询块，在其中统一管理所有组件的响应式样式，请问如何用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

理想写法 #

@media screen and (max-width: 768px) {
     MainContainer {
         /*some changes style*/
     }
     Item2{
         /*some other changes style*/
     }
     /* ....and so on */
}

我之前尝试过给每个styled-components单独编写相同的媒体查询，但希望避免这种重复代码。

解决方案（已解决） #

在@Pius Kariuki的启发下，我找到了解决方法，代码如下：

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;
        }
    }
`

注意事项 #

必须将Container样式的定义放在所有子组件声明之后，这样才能在Container的媒体查询中正确引用子组件的styled样式。

内容的提问来源于stack exchange，提问作者user11113880