css - reactjs 内联样式 gridColumn 不尊重跨度

Question

我正在尝试使用 span 允许使用 grid-column 的事件在日历中分布在多天，但这似乎只适用于 css 或样式组件。它在内联样式中不起作用。任何人有任何想法使它与内联样式一起工作吗？

代码沙盒:https://codesandbox.io/s/react-event-calendar-8v9o1?file=/src/Components/CalendarEvent.js

代码片段:

    <span
      className="calendar-event-label"
      styled={{gridColumnStart: col, gridColumnEnd: `span ${colSpan}`}}
      onClick={onClick}
    >{title}</span>

Answer 1

使用 Style 而不是 Styled

style={{
        gridColumnStart: col,
        gridColumnEnd: `span ${colSpan}`
      }}

我检查了它工作的代码沙箱中的更改。

工作:https://codesandbox.io/s/react-event-calendar-forked-4s0h9