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的内联样式版本中不起作用

1 个答案: