如何用react-emotion正确设置react-datePicker容器及各类样式？

修复容器样式的错误 #

首先确认你已经导入了@emotion/react的css函数：

import { css } from '@emotion/react';

推荐用法：使用Emotion的css属性 #

Emotion推荐直接通过css属性传递样式，能避免类名冲突，同时直观控制嵌套样式：

// 定义包含内部组件样式的容器样式
const datePickerStyles = css`
  width: 80%;
  border: none;

  // 覆盖react-datepicker的头部样式
  & .react-datepicker__header {
    background-color: #f0f0f0;
    border: none;
    padding: 12px 0;
  }

  // 自定义选中/范围内日期的样式
  & .react-datepicker__day--selected,
  & .react-datepicker__day--in-range {
    background-color: #165dff;
    border-radius: 50%;
  }
`;

// 在DatePicker组件中使用
<DatePicker
  css={datePickerStyles}
  selected={startDate}
  onChange={onChange}
  startDate={startDate}
  endDate={endDate}
  selectsRange
  inline
  showYearDropdown
  showMonthDropdown
  renderCustomHeader={(date, prevDisabled, nextDisabled, changeYear, changeMonth, incMonth, decMonth) => (
    <CustomHeader
      date={date}
      prevMonthButtonDisabled={prevDisabled}
      nextMonthButtonDisabled={nextDisabled}
      changeMonth={changeMonth}
      changeYear={changeYear}
      increaseMonth={incMonth}
      decreaseMonth={decMonth}
    />
  )}
/>

备选：使用className属性 #

如果偏好使用className，直接将Emotion生成的样式类传入即可，嵌套选择器写法一致：

const datePicker = css`
  width: 80%;
  border: none;

  & .react-datepicker__header {
    background-color: #f0f0f0;
  }
`;

<DatePicker
  className={datePicker}
  // 其他props...
/>

之前代码出错的常见原因 #

1. 未正确导入Emotion的css函数：必须从@emotion/react导入，而非其他Emotion相关包
2. 样式优先级不足：React-Datepicker默认样式优先级较高，通过嵌套选择器（& .内部类）可提升自定义样式优先级，无需使用!important
3. 类名作用对象误解：DatePicker的className是添加到最外层.react-datepicker容器上的，嵌套选择器能正确命中内部元素

自定义头部组件的样式 #

你的CustomHeader也可以直接用Emotion设置样式：

const customHeaderStyles = css`
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 8px;
  font-size: 16px;
`;

const CustomHeader = ({ date, prevMonthButtonDisabled, nextMonthButtonDisabled, increaseMonth, decreaseMonth }) => (
  <div css={customHeaderStyles}>
    <button onClick={decreaseMonth} disabled={prevMonthButtonDisabled} style={{ border: 'none', background: 'transparent', cursor: 'pointer' }}>
      ←
    </button>
    <span>{`${date.getFullYear()}年${date.getMonth() + 1}月`}</span>
    <button onClick={increaseMonth} disabled={nextMonthButtonDisabled} style={{ border: 'none', background: 'transparent', cursor: 'pointer' }}>
      →
    </button>
  </div>
);

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