如何在带有反应的样式化组件中使用网格模板区域？

Question

我正在尝试制作一个我定义区域的网格，但网格布局在屏幕上不起作用。我不确定如何调试它。在我看来，我已经正确定义了一切。我错过了什么？

const GridLayout = styled.div`
  height: 100vh;
  display: grid;
  grid-template-areas:
    'nav nav nav'
    'aside main aside'
    'footer footer footer';
  grid-template-rows: 1fr 9fr 1fr;
  grid-template-columns: 1fr 6fr 1fr;
`;

const Nav = styled.nav`
  grid-area: nav;
`;
const Aside = styled.aside`
  grid-area: aside;
`;
const Main = styled.main`
  grid-area: main;
`;
const Footer = styled.footer`
  grid-area: footer;
`;

function App() {
  return (
    <>
      <GlobalStyle globalProps={globalProps} />
      <ThemeProvider theme={theme}>
        <GridLayout>
          <Nav>Nav Area</Nav>
          <Aside />
          <Main>Main area</Main>
          <Aside />
          <Footer>Footer area</Footer>
        </GridLayout>
      </ThemeProvider>
    </>
  );
}

Answer 1

您不能在一个区域（aside 在这种情况下）将“部分”放置在网格的未连接部分。创建 asideLeft 和 asideRight 而不是单个 aside 区域 (sandbox):

const GridLayout = styled.div`
  height: 100vh;
  display: grid;
  grid-template-areas:
    "nav nav nav"
    "asideLeft main asideRight"
    "footer footer footer";
  grid-template-rows: 1fr 9fr 1fr;
  grid-template-columns: 1fr 6fr 1fr;
`;

const Nav = styled.nav`
  grid-area: nav;
`;
const AsideLeft = styled.aside`
  grid-area: asideLeft;
`;
const AsideRight = styled.aside`
  grid-area: asideRight;
`;
const Main = styled.main`
  grid-area: main;
`;
const Footer = styled.footer`
  grid-area: footer;
`;

如何在带有反应的样式化组件中使用网格模板区域？

How do I use grid-template-areas in styled-components with react?

css

reactjs

styled-components