reactjs Inline-Style gridColumn not respecting span

2
votes

I'm trying to use span to allow the events using grid-column to spread across multiple days in a calendar, but this seems to only work in css or styled-components. It does not work in inline-styles. Anyone have any idea to make this work with inline-styles?

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

Code Snippet:

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

1 Answers

1
votes

Use Style instead of Styled

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

I checked the changes in the code sandbox it works.

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