CSS如何使用伪类为React Big Calendar中日期span元素设置不同颜色

实现方案 #

方案1：使用组件内置自定义渲染能力（推荐） #

React Big Calendar 支持通过 components 配置项自定义日期头部的渲染逻辑，不会因为库版本迭代导致样式失效，适配性更强：

1. 定义自定义日期头部组件

const CustomDayHeader = ({ date }) => {
  // 英文周几输出Mon/Tue格式，要中文可以把locale改为zh-CN
  const weekDay = new Intl.DateTimeFormat('en-US', { weekday: 'short' }).format(date)
  const dayNum = date.getDate().toString().padStart(2, '0')
  return (
    <div className="custom-date-item">
      <span className="week-day">{weekDay}</span>
      <span className="day-num">{dayNum}</span>
    </div>
  )
}

2. 给日历组件传入配置

<Calendar
  // 保留你原来的所有配置项
  components={{
    dayHeader: CustomDayHeader
  }}
/>

3. 配套样式

.custom-date-item .week-day {
  color: #000;
  margin-right: 4px;
}
.custom-date-item .day-num {
  color: #999;
}

方案2：仅修改现有DOM样式 #

如果不想调整日历组件的渲染逻辑，可以通过少量JS配合CSS实现效果：

1. 注入JS处理现有DOM结构

document.querySelectorAll('.date-item [role="itemheader"]').forEach(el => {
  const [weekDay, dayNum] = el.textContent.split(' ')
  el.dataset.weekDay = weekDay
  el.dataset.dayNum = dayNum
  el.textContent = ''
})

2. 配套样式

.date-item [role="itemheader"]::before {
  content: attr(data-week-day);
  color: #000;
  margin-right: 4px;
}
.date-item [role="itemheader"]::after {
  content: attr(data-day-num);
  color: #999;
}

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