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

Question

div 一和二重叠，但内联样式不起作用。

内联样式版本对应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"));

Codesandbox: 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'
};

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

Overlapping items with Grid Layout does not work in the inline style version with React.js

javascript

css

jsx

reactjs

preact