使用emotion styled包裹FullCalendar后timeGridPlugin失效求助

在React项目中使用FullCalendar时，尝试用Emotion的styled组件包裹以修改内部样式（比如修改标题颜色），但添加包裹层后，timeGridPlugin失效，无法显示时间网格；注释掉包裹层后，时间网格就能正常渲染。

精简代码示例 #

导入部分

import styled from "@emotion/styled";
import FullCalendar, { formatDate } from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";

样式包裹组件

export const StyleWrapper = styled.div`
  .fc-toolbar-title {
    color: red;
  }
`;

渲染逻辑

render() {
  return (
    <div
      style={{
        height: "100vh",
        padding: "2em",
        fontFamily: `'Quicksand', sans-serif`,
      }}
      data-testid="FullCalender"
    >
      <StyleWrapper>
        <FullCalendar
          plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
          headerToolbar={{
            start: "prev,next today",
            center: "title",
            end: "dayGridMonth,timeGridWeek,timeGridDay",
          }}
          initialView="timeGridWeek"
          editable={true}
          selectable={true}
          selectMirror={true}
          dayMaxEvents={true}
          weekends={true}
          select={this.handleSelectSlot}
          eventClick={this.handleSelectEvent}
          eventDrop={this.handleEventDrop}
          height="90%"
        />
      </StyleWrapper>
    </div>
  );
}

解决方法 #

方法1：给样式包裹层添加display: contents

Emotion生成的div会额外增加DOM层级，破坏FullCalendar timeGrid的布局上下文。添加display: contents后，该包裹层不参与布局计算，但样式仍能作用于内部的FullCalendar组件：

export const StyleWrapper = styled.div`
  display: contents;
  .fc-toolbar-title {
    color: red;
  }
`;

方法2：改用Emotion的css prop替代styled组件

避免额外的DOM层级，直接给FullCalendar的父元素添加样式：

// 先导入css
import { css } from '@emotion/react';

// 渲染时使用css prop
render() {
  return (
    <div
      style={{
        height: "100vh",
        padding: "2em",
        fontFamily: `'Quicksand', sans-serif`,
      }}
      data-testid="FullCalender"
    >
      <div css={css`
        .fc-toolbar-title {
          color: red;
        }
      `}>
        <FullCalendar {...你的配置} />
      </div>
    </div>
  );
}

方法3：使用限定作用域的全局样式

给FullCalendar的父元素添加自定义类名，然后在全局样式文件中编写限定作用域的样式：

// 渲染时添加类名
<div className="custom-calendar-wrapper">
  <FullCalendar {...你的配置} />
</div>

/* 全局样式文件中 */
.custom-calendar-wrapper .fc-toolbar-title {
  color: red;
}

原因说明 #

FullCalendar的timeGrid布局依赖于特定的父元素尺寸和布局上下文，Emotion的styled组件生成的额外div会改变这个上下文，导致时间网格无法正确渲染。上述方法通过消除额外布局影响或调整样式作用方式，解决了样式修改与插件功能冲突的问题。

内容的提问来源于stack exchange，提问作者auratium