MUI DatePicker日历组件样式定制：PaperProps无效及SX使用疑问

一、为什么直接用sx属性无法定制日历面板？ #

DatePicker的sx样式仅作用于自身根容器（如外层div），而日历面板是通过Popper组件独立挂载到DOM的其他位置（通常是body节点下），属于完全分离的DOM分支。因此DatePicker的根样式无法穿透到日历面板，必须通过专门的子组件传递属性来定制。

二、为什么PaperProps直接传递给DatePicker未生效？ #

MUI Lab的DatePicker本身不直接接收PaperProps，日历面板的Paper属于内部Calendar组件的子元素，需要通过CalendarProps将PaperProps传递给Calendar组件才能生效。

三、正确的样式定制方案 #

方案1：通过CalendarProps传递PaperProps（推荐） #

直接给DatePicker设置CalendarProps，将样式传递给日历面板的Paper组件：

<DatePicker
  CalendarProps={{
    PaperProps: {
      sx: {
        backgroundColor: 'red', // 自定义背景色
        border: '1px solid black', // 自定义边框
        borderRadius: 1 // 可选：添加圆角
      }
    }
  }}
  // 其他原有属性...
/>

方案2：通过PopperProps精准定位样式 #

如果方案1不生效，可通过PopperProps直接定位到内部Paper元素，提升样式优先级：

<DatePicker
  PopperProps={{
    sx: {
      '& .MuiCalendarPicker-root .MuiPaper-root': {
        backgroundColor: 'red',
        border: '1px solid black'
      }
    }
  }}
  // 其他原有属性...
/>

四、修改后的完整代码 #

import PropTypes from 'prop-types';
import { TextField } from '@material-ui/core';
import { alpha } from '@material-ui/core/styles';
import DatePicker from '@material-ui/lab/DatePicker';
import { AppBorderStyle } from '../theme';

export const DateField = (props) => {
  const {
    error,
    fullWidth,
    helperText,
    label,
    onChange,
    onBlur,
    placeholder,
    disabled,
    value,
    name,
    ...other
  } = props;

  return (
    <DatePicker
      // 新增：通过CalendarProps设置日历面板样式
      CalendarProps={{
        PaperProps: {
          sx: {
            backgroundColor: 'red',
            border: '1px solid black',
            borderRadius: 1
          }
        }
      }}
      onChange={onChange}
      renderInput={({ InputProps, ...rest }) => (
        <TextField
          {...rest}
          disabled={disabled}
          onBlur={onBlur}
          name={name}
          error={error}
          fullWidth={fullWidth}
          helperText={helperText}
          label={label}
          placeholder={placeholder}
          sx={{
            '& .MuiFilledInput-root': {
              backgroundColor: 'background.paper',
              borderRadius: 1,
              border: AppBorderStyle,
              px: 1.5,
              py: 0.75,
              transition: (theme) => theme.transitions.create([
                'border-color',
              ]),
              '&:hover': {
                backgroundColor: 'background.paper'
              },
              '&.Mui-focused': {
                backgroundColor: 'background.paper',
                boxShadow: (theme) => `${alpha(theme.palette.primary.main,
                  0.25)} 0 0 0 0.2rem`
              },
              '& .MuiFilledInput-input': {
                fontSize: 14,
                height: 'unset',
                lineHeight: 1.6,
                p: 0
              },
              '&.Mui-disabled': {
                backgroundColor: 'action.disabledBackground',
                boxShadow: 'none',
                borderColor: alpha('#D6DBE1', 0.5)
              }
            }
          }}
          variant="filled"
          InputProps={{
            disableUnderline: true,
            ...InputProps
          }}
          InputLabelProps={{
            shrink: true,
            sx: {
              color: 'text.primary',
              fontSize: 14,
              fontWeight: 500,
              mb: 0.5,
              position: 'relative',
              transform: 'none'
            }
          }}
        />
      )}
      value={value}
      {...other}
    />
  );
};

DateField.defaultProps = {
  disabled: false,
};

DateField.propTypes = {
  disabled: PropTypes.bool,
  error: PropTypes.bool,
  fullWidth: PropTypes.bool,
  helperText: PropTypes.string,
  label: PropTypes.string,
  name: PropTypes.string,
  onChange: PropTypes.func.isRequired,
  onBlur: PropTypes.func.isRequired,
  placeholder: PropTypes.string,
  value: PropTypes.instanceOf(Date)
};

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