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

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

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

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

我再次尝试使用template-literals，但也无效。

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

那么，是不是只是因为我遇到了这个障碍，或者这种反应尚未得到支持？

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

Answer 1

只需使用反引号字符串。

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

Answer 2

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

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

并使用内联样式对象

像我使用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;

Answer 3

如果目标是将grid-template-areas与HTML style属性（即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;
}

<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>

Answer 4

对于具有这样二维数组的人：

let grid2D = [
 ["area-70774248-ed4a-4f60-8341-46d4173344f8","area-e06e944f-a50a-4630-ac19-6c85ca0e7bc3","area-e06e944f-a50a-4630-ac19-6c85ca0e7bc3","area-e06e944f-a50a-4630-ac19-6c85ca0e7bc3"],
 ["area-70774248-ed4a-4f60-8341-46d4173344f8","area-e06e944f-a50a-4630-ac19-6c85ca0e7bc3","area-e06e944f-a50a-4630-ac19-6c85ca0e7bc3","area-e06e944f-a50a-4630-ac19-6c85ca0e7bc3"],
 ["area-70774248-ed4a-4f60-8341-46d4173344f8","area-1d20d72e-5383-47aa-bcc4-8aaed8137410","area-1d20d72e-5383-47aa-bcc4-8aaed8137410","area-1d20d72e-5383-47aa-bcc4-8aaed8137410"],
 [".","area-1d20d72e-5383-47aa-bcc4-8aaed8137410","area-1d20d72e-5383-47aa-bcc4-8aaed8137410","area-1d20d72e-5383-47aa-bcc4-8aaed8137410"],
 [".","area-1d20d72e-5383-47aa-bcc4-8aaed8137410","area-1d20d72e-5383-47aa-bcc4-8aaed8137410","area-1d20d72e-5383-47aa-bcc4-8aaed8137410"]
]

要连接数组，以便有可能将其插入为内联样式，只需使用这一行即可

let stringGrid = "'" + grid2D.map(arr => arr.join(' ')).join("' '") + "'";

在react组件中，它可以像这样工作：

export class Grid extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      grid2D: [
       ["area-70774248-ed4a-4f60-8341-46d4173344f8","area-e06e944f-a50a-4630-ac19-6c85ca0e7bc3","area-e06e944f-a50a-4630-ac19-6c85ca0e7bc3","area-e06e944f-a50a-4630-ac19-6c85ca0e7bc3"],
       ["area-70774248-ed4a-4f60-8341-46d4173344f8","area-e06e944f-a50a-4630-ac19-6c85ca0e7bc3","area-e06e944f-a50a-4630-ac19-6c85ca0e7bc3","area-e06e944f-a50a-4630-ac19-6c85ca0e7bc3"],
       ["area-70774248-ed4a-4f60-8341-46d4173344f8","area-1d20d72e-5383-47aa-bcc4-8aaed8137410","area-1d20d72e-5383-47aa-bcc4-8aaed8137410","area-1d20d72e-5383-47aa-bcc4-8aaed8137410"],
       [".","area-1d20d72e-5383-47aa-bcc4-8aaed8137410","area-1d20d72e-5383-47aa-bcc4-8aaed8137410","area-1d20d72e-5383-47aa-bcc4-8aaed8137410"],
       [".","area-1d20d72e-5383-47aa-bcc4-8aaed8137410","area-1d20d72e-5383-47aa-bcc4-8aaed8137410","area-1d20d72e-5383-47aa-bcc4-8aaed8137410"]
      ]
    };
  }

  getTemplateAreas(grid2D) { 
    return "'" + grid2D.map(arr => arr.join(' ')).join("' '") + "'"; 
  }

  render() {
    const { grid2D } = this.state;
    return (
      <div style={{ gridTemplateAreas: this.getTemplateAreas(grid2D), display: 'grid', width: '100%', height: "100%" }}>
         {grid2D.map((arr, i1) => {
          return arr.map((id, i2) => {
            return <div key={i1 + '' + i2} style={{ gridArea: id }} />;
          });
        })}
      </div>
    );
  }
}

重要提示：网格区域名称/标识必须以字母字符开头

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

4 个答案: