传递道具时 MUI MakeStyles 未按预期工作

Question

我一直在研究使用 React 和 Material-ui 制作的范围日期选择器。我有一个原子组件（按钮），它在某些日期值更改的日期之后获得一些样式。

不是最好的代码，但现在我只想完成工作，问题是我想用类来做这件事，但只有在为它分配样式时才能按预期工作，如果我将 props 传递给 {{1 }}它开始做奇怪的事情。

将 props 传递给 useStyles

1. 悬停按钮
2. 点击按钮 - 开始日期
3. 范围效果，悬停在 16 日
4. 第 16 次点击 - 结束日期
5. 悬停在 14 日
6. 如果选择了开始日期但未选择结束日期，则会出现奇怪的行为

DatePickerButton.jsx

useStyles(props)

Styles.js

import React from 'react';
import { Button } from '@material-ui/core';
import PropTypes from 'prop-types';
import fcc from 'font-color-contrast';

import { colors } from 'UI/res/colors';
import { useStyles } from './styles';

const DatePickerDisplayButton = ({
  children,
  actualDate,
  displayDate,
  selectedDates: {
    start: startDate,
    end: endDate
  },
  focusedDate,
  type,
  index,
  onMouseEnter,
  onRangeChange,
  multiple,
  ...rest
}) => {
  // function expression that sets backgroundColor and color
  // depending on dates
  const getRangeBackgroundColor = () => {
    const color = fcc(colors.main.red.original);
    if (
      displayDate === startDate ||
      displayDate === endDate ||
      (displayDate === focusedDate && !endDate)
    ) {
      return { color, backgroundColor: colors.main.red.original };
    } else if (
      (displayDate > startDate && displayDate < endDate) ||
      (displayDate > startDate && displayDate < focusedDate && !endDate) ||
      (displayDate < startDate && displayDate > focusedDate && !endDate)
    ) {
      return { color, backgroundColor: colors.main.red.softer };
    }
    return null;
  };

  const classes = useStyles({
    index,
    multiple,
    // pass colors object to useStyles to get in props
    color: getRangeBackgroundColor()
  });

  return (
    <Button
      type="contained"
      onMouseEnter={onMouseEnter(displayDate)}
      onClick={onRangeChange(displayDate, type)}
      className={classes.calendarButton}
      {...rest}
    >
      {children}
    </Button>
  );
};

带样式道具

这是所需的行为，唯一改变的是我将 import { makeStyles } from '@material-ui/core'; import { colors } from 'UI/res/colors'; export const useStyles = makeStyles(() => ({ calendarButton: { width: 'calc(100% / 7)', minWidth: 'calc(100% / 7)', borderRadius: 0, margin: 0, borderTop: `1px solid ${colors.main.red.soft}`, borderLeft: `1px solid ${colors.main.red.soft}`, borderBottom: ({index, multiple}) => (index + 1 < multiple && index + 1 > multiple - 7) ? `1px solid ${colors.main.red.soft}` : null, borderRight: ({index}) => ((index + 1) % 7) === 0 ? `1px solid ${colors.main.red.soft}` : null, backgroundColor: ({color}) => color?.backgroundColor, color: ({color}) => color?.color } })); 传递给我的按钮 getRangeBackgroundColor() 属性。

1. 按钮悬停
2. 点击按钮 - 选择开始日期
3. 完成日期悬停
4. 已选择完成日期 - 如果在选择两个日期时将鼠标悬停，则此日期不会更改，如果未选择完成日期，则不会出现奇怪的行为

DatePickerButton.jsx

style

Styles.js

import React from 'react';
import { Button } from '@material-ui/core';
import PropTypes from 'prop-types';
import fcc from 'font-color-contrast';

import { colors } from 'UI/res/colors';
import { useStyles } from './styles';

const DatePickerDisplayButton = ({
  children,
  actualDate,
  displayDate,
  selectedDates: {
    start: startDate,
    end: endDate
  },
  focusedDate,
  type,
  index,
  onMouseEnter,
  onRangeChange,
  multiple,
  ...rest
}) => {
  
  const classes = useStyles({
    index,
    multiple
  });

  const getRangeBackgroundColor = () => {
    const color = fcc(colors.main.red.original);
    if (
      displayDate === startDate ||
      displayDate === endDate ||
      (displayDate === focusedDate && !endDate)
    ) {
      return { color, backgroundColor: colors.main.red.original };
    } else if (
      (displayDate > startDate && displayDate < endDate) ||
      (displayDate > startDate && displayDate < focusedDate && !endDate) ||
      (displayDate < startDate && displayDate > focusedDate && !endDate)
    ) {
      return { color, backgroundColor: colors.main.red.softer };
    }
    return null;
  };

  return (
    <Button
      type="contained"
      onMouseEnter={onMouseEnter(displayDate)}
      onClick={onRangeChange(displayDate, type)}
      className={classes.calendarButton}
      style={getRangeBackgroundColor()}
      {...rest}
    >
      {children}
    </Button>
  );
};