如何在反应内联样式中使用网格模板区域？

Question

如何在反应内联样式中使用网格模板区域？

所以,css-grids当我注意到grid-template-areas有一些不同的语法可能与内联反应样式不兼容时,我一直在玩反应.我没有使用任何库只是简单的旧内容样式与样式道具反应.

所以我打算做的就是这个.

.wrapper {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-areas: "header header"
                       "aside main"
                       "footer footer"
}

.header {
  grid-area: header;
  border: 1px solid red;
}
.main {
  grid-area: main;
  border: 1px solid green;
} 

.aside {
  grid-area: aside
}
.footer {
  grid-area: footer;
  border: 1px solid yellow;
}

Run Code Online (Sandbox Code Playgroud)

Fidde:https://jsbin.com/lejaduj/2/edit ？ html,css,output

布局很简单,"标题"和"页脚"覆盖了所有列,"旁边"和"主要"覆盖了一半.这只是为了演示目的所以我保持简单.
特别注意grid-template-areas多个值是如何用双引号分隔的.

经过一番思考后,我认为我们可以gridTemplateAreas在反应内联样式中使用数组.这似乎不起作用.

我再次尝试过template-literals哪个也没用.

沙箱:https://codesandbox.io/s/zx4nokmr5l

那么,仅仅是我遇到了这个障碍还是尚未得到反应？

我宁愿不使用任何额外的库或框架来尽可能地实现这一点.

Answer 1

小智 7

只需使用反引号字符串即可。

gridTemplateAreas: `
                    'header header'
                    'aside main'
                    'footer footer'
                `

Run Code Online (Sandbox Code Playgroud)

Answer 2

Ale*_*der 5

如果您需要样式的对象，则可以使用

    myStyle = {
        display: 'grid',
        gridTemplateAreas: "'header' 'content' 'footer'",
        gridTemplateRows: '50px calc(100vh - 100px) 50px' 
    };

Run Code Online (Sandbox Code Playgroud)

并内联使用样式对象

就像我使用styletron一样

    import { styled } from 'styletron-react';

    const myStyle = {
        backgroundColor: 'whitesmoke',
        display: 'grid',
        gridTemplateAreas: "'header' 'content' 'footer'",
        gridTemplateRows: '50px calc(100vh - 100px) 50px'
    };

    const Layout = styled('div', (props) => (myStyle));

    export default Layout;

Run Code Online (Sandbox Code Playgroud)

Answer 3

Mic*_*l_B 4

如果目标是grid-template-areas与 HTMLstyle属性（即 CSS 内联样式）一起使用，则使用单引号而不是双引号。

.wrapper {
  display: grid;
  grid-template-columns: 100px 100px;
  /* grid-template-areas: "header header"
                          "aside main"
                          "footer footer"; */
}

.header {
  grid-area: header;
  background-color: aqua;
}

.main {
  grid-area: main;
  background-color: lightgreen;
}

.aside {
  grid-area: aside;
  background-color: yellow;
}

.footer {
  grid-area: footer;
  background-color: pink;
}

Run Code Online (Sandbox Code Playgroud)

<body class="wrapper" style="grid-template-areas: 'header header' 'aside main' 'footer footer' ">
  <div class="header">header</div>
  <div class="main">main</div>
  <div class="aside">aside</div>
  <div class="footer">footer</div>
</body>

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年，10 月前
查看次数：	7542 次
最近记录：	6 年，2 月前