如何在样式组件中使用网格模板区域进行反应？ [复制]答案

【问题标题】：How do I use grid-template-areas in styled-components with react? [duplicate]如何在样式组件中使用网格模板区域进行反应？ [复制]
【发布时间】：2019-11-15 22:57:00
【问题描述】：

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

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>
    </>
  );
}

【问题讨论】：

我不明白他们为什么将此标记为重复问题。另一个问题与这个问题不同，即使他们可能有类似的解决方案。

标签： css reactjs styled-components

【解决方案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;
`;

【讨论】：