使用网格布局重叠的项目在带有 React.js 的内联样式版本中不起作用

Question

div one 和 two 是重叠的，但使用内联样式不起作用。

内联样式版本对应于 style.scss 版本。

为什么内联样式不起作用？

const App = props => (
  // WORKS!!!
  // <div class="wrapper">
  //   <div class="box box1">One</div>
  //   <div class="box box2">Two</div>
  //   <div class="box">Three</div>
  //   <div class="box">Four</div>
  //   <div class="box">Five</div>
  // </div>
  //NOT WORKS.
  <div style={wrapper}>
    <div style={{ ...box, ...box1 }}>One</div>
    <div style={{ ...box, ...box2 }}>Two</div>
    <div style={box}>Three</div>
    <div style={box}>Four</div>
    <div style={box}>Five</div>
  </div>
);
render(<App />, document.getElementById("root"));

代码沙盒：https://codesandbox.io/s/qxq5j1n95w

Answer 1

此处未提供，但在 SandBox 示例中，您写道：

const box1 = {
  gridColumnStart: 1,
  gridColumnEnd: 4,
  gridRowStart: 1,
  gridRowEnd: 3
};

而不是：

const box1 = {
  gridColumnStart: '1',
  gridColumnEnd: '4',
  gridRowStart: '1',
  gridRowEnd: '3'
};