如何通过创建一个对移动设备友好的单独css网格组件来清理我的react代码

Question

我希望用它制作一个对移动友好的网格组件。我希望把这整段代码从app.js中取出，放到一个组件文件中。我希望这样做没有一个单独的css文件。

const GridLayout = styled.div`
height: 100vh;
display: grid;
grid-template-areas:
"nav nav nav"
"asideLeft main asideRight"
"leftFooter footer rightFooter";
grid-auto-rows: 1fr 8fr 1fr auto;
grid-template-columns: 1fr 5fr 2fr auto 1fr;
`;
const Nav = styled.nav`
grid-area: nav;
font-size: calc(20px + 0.25em);
border-right: 10px solid;
`;
const AsideLeft = styled.aside`
grid-area: asideLeft;
transform: rotate(20deg);
border-bottom: 25px solid;
align-self: start;
`;
const AsideRight = styled.aside`
grid-area: asideRight;
font-weight: bolder;
writing-mode: vertical-rl;
transform: rotate(-20deg);
border-right: 18px solid;
justify-content: end;
`;
const Main = styled.main`
border-top: 15px solid;
grid-area: main;
`;
const Footer = styled.footer`
border-top: 20px solid;
grid-area: footer;
font-size: calc(10px + 0.25em);
border-bottom: 40px solid;
`;

谢谢你的帮助！它把我逼疯了！

Answer 1

您可以先使用现有的css，然后向GridLayout组件添加一个媒体查询。

const GridLayout = styled.div`
height: 100vh;
display: grid;
grid-template-areas:
"nav nav nav"
"asideLeft main asideRight"
"leftFooter footer rightFooter";
grid-auto-rows: 1fr 8fr 1fr auto;
grid-template-columns: 1fr 5fr 2fr auto 1fr;
@media screen and (max-width: /*some size here*/) {
//some styling here
}
`;

例如，在700px或更低的屏幕上删除asideRight。。。

const GridLayout = styled.div`
height: 100vh;
display: grid;
grid-template-areas:
"nav nav nav"
"asideLeft main asideRight"
"leftFooter footer rightFooter";
grid-template-rows: 1fr 2fr 1fr;
grid-template-columns: 1fr 2fr 1fr;
@media screen and (max-width: 700px) {
grid-template-areas:
"nav nav nav"
"asideLeft main main"
"leftFooter footer rightFooter";
}
`;

*注意，我确实更改了一些原始样式的属性